/* ANTIQUE CARTOGRAPHY DESIGN SYSTEM */
  :root {
    --parchment-base: #f5eedf;
    --parchment-deep: #e8dcc4;
    --parchment-light: #faf6ed;
    --ink-dark: #221710;
    --ink-mid: #4a3423;
    --ink-sepia: #735438;
    --vermilion: #9e2a2b;
    --gold: #bfa15f;
    --gold-bright: #d4af37;
    --lapis: #23425e;
    --sea-tint: #e4d8bf;
    --land-tint: #fbf7ee;
  }

  body {
    background-color: var(--parchment-base) !important;
    color: var(--ink-dark) !important;
    font-family: 'EB Garamond', Georgia, serif;
  }

  .carto-font-title {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
  }

  .carto-font-sub {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
  }

  .carto-font-body {
    font-family: 'EB Garamond', Georgia, serif;
  }

  /* Classical Parchment Borders */
  .parchment-box {
    background-color: var(--parchment-light);
    border: 2px solid var(--ink-dark);
    box-shadow: 0 4px 18px rgba(34, 23, 16, 0.12), inset 0 0 40px rgba(191, 161, 95, 0.12);
    position: relative;
  }

  .parchment-box::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(74, 52, 35, 0.4);
    pointer-events: none;
  }

  .carto-badge {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border: 1px solid var(--ink-mid);
    background: var(--parchment-deep);
    color: var(--ink-dark);
    letter-spacing: 0.06em;
  }

  /* Decorative Folio Scrollbar */
  .custom-folio-scroll::-webkit-scrollbar {
    width: 6px;
  }
  .custom-folio-scroll::-webkit-scrollbar-track {
    background: var(--parchment-deep);
  }
  .custom-folio-scroll::-webkit-scrollbar-thumb {
    background: var(--ink-sepia);
  }

  /* Illuminated Initial Cap */
  .drop-cap {
    float: left;
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 3.2rem;
    line-height: 0.85;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 2px;
    color: var(--vermilion);
    text-shadow: 1px 1px 0px rgba(191, 161, 95, 0.6);
  }

  /* Canvas Map Frame */
  #map-container {
    position: relative;
    background-color: var(--sea-tint);
    border: 3px solid var(--ink-dark);
    overflow: hidden;
    cursor: grab;
    user-select: none;
  }

  #map-container:active {
    cursor: grabbing;
  }

  .map-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--parchment-light);
    border: 1.5px solid var(--ink-dark);
    padding: 6px 10px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
    z-index: 30;
    display: none;
    transform: translate(-50%, -130%);
    white-space: nowrap;
  }

  .stage-pill {
    transition: all 0.15s ease;
    font-family: 'Cinzel', serif;
  }
  .stage-pill.active {
    background: var(--vermilion) !important;
    color: #ffffff !important;
    border-color: var(--ink-dark) !important;
  }
  .stage-pill:hover:not(.active) {
    background: var(--parchment-deep);
  }