/* ==========================================================================
   1. GLOBAL ARCHITECTURE & VIEWPORT LOCK
   ========================================================================== */

* {
  box-sizing: border-box;
}

.interactive-nav { position: fixed; top: 16px; left: 18px; right: 18px; z-index: 100; display: flex; justify-content: space-between; pointer-events: none; }
.interactive-nav a { pointer-events: auto; padding: 9px 14px; border: 1px solid #a78547; background: rgba(8, 8, 8, 0.92); color: #c2a060; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-decoration: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.interactive-nav a:hover { border-color: #f1ede6; background: #a78547; color: #080808; }

body {
  margin: 0;
  padding: 0;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;

  background-color: #000000;
  color: #111111;

  height: 100vh;
  width: 100vw;

  overflow: hidden;
}

#scrollytelling-wrapper {
  display: flex;
  flex-direction: column;

  height: 100vh;
  width: 100vw;
}


/* ==========================================================================
   2. MAIN WORKSPACE: THREE-COLUMN CORE SYSTEM
   ========================================================================== */

#graphic-fixed-box {
  flex: 1;

  display: flex;
  flex-direction: row;

  justify-content: center;
  align-items: center;

  gap: 40px;
  padding: 20px;

  background-color: #000000;

  min-height: 0;
}


/* ==========================================================================
   COLUMN 1: HISTORICAL ARCHIVE
   ========================================================================== */

#left-controls-column {
  display: flex;
  flex-direction: column;

  align-items: center;

  width: 260px;

  flex-shrink: 0;
}


#notable-profile-sidebar {
  box-shadow: 0 10px 30px rgba(167, 133, 71, 0.28);
  width: 100%;
  height: 420px;

  background: #ffffff;

  border-radius: 12px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.04);

  padding: 24px;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;

  position: relative;

  overflow: hidden;

  border-top:
    4px solid #cbd5e1;

  transition:
    all 0.4s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}


/* --------------------------------------------------------------------------
   Archive cover / closed state
   -------------------------------------------------------------------------- */

#dressing-room-door {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      135deg,
      #f8fafc 0%,
      #e2e8f0 100%
    );

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  padding: 24px;

  z-index: 10;

  transition:
    all 0.35s
    ease-in-out;

  pointer-events: none;
}


.archive-portal-title {
  font-size: 11px;

  color: #475569;

  letter-spacing: 2px;

  margin-bottom: 24px;

  font-weight: 700;
}


.archive-icon-badge {
  width: 76px;
  height: 76px;

  background: #ffffff;

  border:
    1px solid #cbd5e1;

  border-radius: 50%;

  display: flex;

  justify-content: center;
  align-items: center;

  margin-bottom: 20px;

  box-shadow:
    0 4px 10px
    rgba(0, 0, 0, 0.02);
}


.archive-folder-glyph {
  font-size: 38px;

  line-height: 1;

  display: block;

  opacity: 0.95;
}


.archive-status-pill {
  background:
    rgba(
      42,
      157,
      143,
      0.08
    );

  /*color: #ff84c4;*/
  color: #a78547;

  font-weight: 700;

  font-size: 10px;

  letter-spacing: 1.5px;

  padding: 6px 14px;

  border-radius: 20px;

  border:
    1px solid
    rgba(
      42,
      157,
      143,
      0.15
    );

  margin-bottom: 20px;
}


.archive-instruction-text {
  color: #475569;

  font-size: 11px;

  line-height: 1.6;

  font-weight: 500;

  max-width: 190px;
}


/* --------------------------------------------------------------------------
   Archive open state
   -------------------------------------------------------------------------- */

#notable-profile-sidebar.archive-record-active {
  border-top-color: #a78547;

  box-shadow:
    0 12px 40px
    rgba(
      42,
      157,
      143,
      0.12
    );
}


#notable-profile-sidebar.archive-record-active
#dressing-room-door {
  opacity: 0;

  visibility: hidden;

  transform:
    scale(0.96)
    translateY(8px);
}


/* --------------------------------------------------------------------------
   Biography information layer
   -------------------------------------------------------------------------- */

#profile-card-inner {
  display: flex;
  flex-direction: column;

  align-items: center;

  width: 100%;

  opacity: 0;

  transform: scale(1.02);

  transition:
    all 0.3s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    )
    0.08s;
}


#notable-profile-sidebar.archive-record-active
#profile-card-inner {
  opacity: 1;

  transform: scale(1);
}


.profile-avatar-frame {
  width: 140px;
  height: 140px;

  border-radius: 50%;

  overflow: hidden;

  box-shadow:
    0 6px 16px
    rgba(0, 0, 0, 0.08);

  margin-bottom: 16px;

  border:
    3px solid #ffffff;

  background: #e2e8f0;

  display: flex;

  justify-content: center;
  align-items: center;
}


#sidebar-avatar {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}


#sidebar-name {
  margin:
    0 0 8px 0;

  font-size: 18px;

  color: #111111;

  font-weight: 700;
}


#sidebar-bio {
  margin: 0;

  font-size: 12px;

  color: #555555;

  line-height: 1.6;
}


/* ==========================================================================
   COLUMN 2: DEMOGRAPHIC CANVAS
   ========================================================================== */

#canvas-column {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  width: min(580px, 48vw);
  aspect-ratio: 1 / 1;

  flex-shrink: 1;
}

#demographic-canvas {
  display: block;

  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;

  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border-radius: 12px;

  cursor: default;
}


/* ==========================================================================
   COLUMN 3: LEGEND + METRICS
   ========================================================================== */

#right-controls-column {
  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 16px;

  width: 260px;

  height: auto;

  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Color legend
   -------------------------------------------------------------------------- */

#legend-container {
  box-shadow: 0 10px 30px rgba(167, 133, 71, 0.28);
  width: 100%;

  background: #ffffff;

  padding: 14px 18px;

  border-radius: 12px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.04);

  border-left:
    4px solid #cbd5e1;

  font-weight: 600;

  font-size: 12px;

  display: flex;
  flex-direction: column;

  gap: 8px;

  z-index: 10;
}


/* --------------------------------------------------------------------------
   Demographic analysis card
   -------------------------------------------------------------------------- */

#metrics-card-container {
  box-shadow: 0 10px 30px rgba(167, 133, 71, 0.28);
  width: 100%;

  background: #ffffff;

  border-radius: 12px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.04);

  padding: 14px 18px;

  display: flex;
  flex-direction: column;

  gap: 10px;

  border-top:
    1px solid #f1f5f9;
}


.metrics-panel-header {
  font-size: 10.5px;

  font-weight: 700;

  color: #64748b;

  letter-spacing: 1.5px;

  border-bottom:
    1px solid #f1f5f9;

  padding-bottom: 6px;

  margin-bottom: 2px;

  display: flex;

  justify-content: space-between;

  align-items: center;
}


#metrics-year {
  font-family: monospace;

  color: #6509c8 !important;

  letter-spacing: 0;

  margin-left: 10px;
}


.metrics-data-row {
  display: flex;

  justify-content: space-between;
  align-items: center;
}


/*
 * Your HTML currently says class="metric-lbl".
 *
 * The old CSS only styled .metrics-data-label.
 * Supporting both prevents the label style from disappearing.
 */

.metrics-data-label,
.metric-lbl {
  font-size: 12.5px;

  font-weight: 600;

  color: #334155;
}


.metrics-data-value {
  font-size: 16px;

  font-weight: 800;

  font-family: monospace;
}


/* --------------------------------------------------------------------------
   Shared demographic colors
   -------------------------------------------------------------------------- */

.legend-female,
.text-teal {
  color: #ff84c4;

  font-weight: 700;
}


.legend-male,
.text-coral {
  color: #5dbcfb;

  font-weight: 700;
}


/* ==========================================================================
   3. BOTTOM TIMELINE PANEL
   ========================================================================== */

#timeline-belt-outer {
  height: 320px;

  width: 100vw;

  background: #ffffff;

  border-top:
    2px solid #e2e8f0;

  flex-shrink: 0;

  display: grid;

  grid-template-rows:
    110px 100px 110px;

  align-items: center;

  position: relative;
}


/* ==========================================================================
   4. SCROLLABLE TIMELINE RUNWAY
   ========================================================================== */

#timeline-scroll-container {
  grid-row: 2;

  width: 100%;
  height: 100px;

  overflow-x: auto;
  overflow-y: hidden;

  cursor: grab;

  position: relative;

  display: flex;

  align-items: center;

  z-index: 5;

  scrollbar-width: thin;

  scrollbar-color:
    #cbd5e1 transparent;
}


#timeline-scroll-container:active {
  cursor: grabbing;
}


#timeline-scroll-container::-webkit-scrollbar {
  height: 5px;
}


#timeline-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}


#timeline-scroll-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;

  border-radius: 999px;
}


#timeline-track-line {
  position: absolute;

  left: 0;

  width: 1800px;

  height: 4px;

  background: #cbd5e1;

  display: block;
}


/* ==========================================================================
   5. TIMELINE MARKERS
   ========================================================================== */

.timeline-marker {
  position: absolute;

  top: 50%;

  width: 24px;
  height: 24px;

  transform:
    translate(-50%, -50%);

  display: flex;

  justify-content: center;
  align-items: center;

  cursor: pointer;

  z-index: 20;
}


/* --------------------------------------------------------------------------
   Major era milestone
   -------------------------------------------------------------------------- */

.node-dot {
  width: 18px;
  height: 18px;

  background: #94a3b8;

  border-radius: 50%;

  border:
    4px solid #ffffff;

  box-shadow:
    0 2px 6px
    rgba(0, 0, 0, 0.1);

  transition:
    all 0.2s ease;
}


.milestone:hover .node-dot {
  background: #ff84c4;

  transform: scale(1.15);
}


.milestone.active .node-dot {
  background: #ff84c4;

  transform: scale(1.25);

  box-shadow:
    0 0 0 5px
    rgba(
      42,
      157,
      143,
      0.2
    );
}


/* --------------------------------------------------------------------------
   Minor historical event
   -------------------------------------------------------------------------- */

.mini-dot {
  width: 12px;
  height: 12px;

  background: #64748b;

  border-radius: 50%;

  border:
    2px solid #ffffff;

  transition:
    all 0.2s ease;
}


.event-node:hover .mini-dot {
  background: #5dbcfb;

  transform: scale(1.15);
}


/* ==========================================================================
   6. TIMELINE TEXT LANES
   ========================================================================== */

.text-display-box {
  width: 100%;
  height: 130px;

  position: relative;

  z-index: 1;

  pointer-events: none;

  /*
   * Absolute safety:
   * cards cannot visually escape
   * the white timeline component.
   */
  overflow: hidden;
}


#text-track-above {
  grid-row: 1;
}


#text-track-below {
  grid-row: 3;
}


.info-card {
  position: absolute;

  /*
   * 320px normally, but shrinks safely
   * on narrow browser windows.
   */
  width: min(320px, calc(100vw - 24px));

  background: #ffffff;

  padding: 11px 15px;

  border-radius: 8px;

  box-shadow:
    0 4px 20px
    rgba(0, 0, 0, 0.06);

  border-left:
    5px solid #cbd5e1;

  display: flex;
  flex-direction: column;

  gap: 4px;

  /*
   * Stay within the 130px lane.
   */
  max-height: 114px;

  overflow: hidden;

  pointer-events: auto;

  /*
   * This is what allows JS to position
   * the CENTER of the card over a point.
   */
  transform: translateX(-50%);

  bottom: 8px;
  top: auto;
}


#text-track-below .info-card {
  top: 8px;
  bottom: auto;
}


.info-card h2 {
  margin: 0;

  font-size: 13.5px;
  line-height: 1.2;

  color: #1a1a1a;

  font-weight: 700;
}


.info-card p {
  margin: 0;

  font-size: 10.5px;
  line-height: 1.35;

  color: #555555;
}


#text-track-above {
  grid-row: 1;
}


#text-track-below {
  grid-row: 3;
}


/* ==========================================================================
   7. TIMELINE INFORMATION CARDS
   ========================================================================== */

.info-card {
  position: absolute;

  /*
   * 320px normally, but shrinks safely
   * on narrow browser windows.
   */
  width: min(320px, calc(100vw - 24px));

  background: #ffffff;

  padding: 11px 15px;

  border-radius: 8px;

  box-shadow:
    0 4px 20px
    rgba(0, 0, 0, 0.06);

  border-left:
    5px solid #cbd5e1;

  display: flex;
  flex-direction: column;

  gap: 4px;

  /*
   * Stay within the 130px lane.
   */
  max-height: 114px;

  overflow: hidden;

  pointer-events: auto;

  /*
   * This is what allows JS to position
   * the CENTER of the card over a point.
   */
  transform: translateX(-50%);

  bottom: 8px;
  top: auto;
}


#text-track-below .info-card {
  top: 8px;

  bottom: auto;
}


.info-card h2 {
  margin: 0;

  font-size: 13.5px;
  line-height: 1.2;

  color: #1a1a1a;

  font-weight: 700;
}


.info-card p {
  margin: 0;

  font-size: 10.5px;
  line-height: 1.35;

  color: #555555;
}


.info-card.color-milestone {
  border-left-color: #ff84c4;
}


.info-card.color-event {
  border-left-color: #5dbcfb;
}


/* ==========================================================================
   8. ANIMATIONS
   ========================================================================== */

.info-card {
  animation: cardFadeIn 0.2s ease forwards;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;

    transform:
      translate(-50%, 4px);
  }

  to {
    opacity: 1;

    transform:
      translate(-50%, 0);
  }
}


@keyframes sidebarCardFadeIn {
  from {
    opacity: 0;

    transform:
      scale(0.96)
      translateY(4px);
  }

  to {
    opacity: 1;

    transform:
      scale(1)
      translateY(0);
  }
}


/* ==========================================================================
   9. RESPONSIVE SAFETY
   ========================================================================== */

/*
 * Laptop / smaller desktop
 */

@media (max-width: 1180px) {
  #graphic-fixed-box {
    gap: 20px;

    padding: 16px;
  }


  #left-controls-column,
  #right-controls-column {
    width: 220px;
  }


  #canvas-column {
    width: min(50vw, 520px);

    height: min(50vw, 520px);
  }
}


/*
 * Tablet / narrow browser
 *
 * Rather than crushing the three-column layout,
 * allow the workspace to wrap.
 */

@media (max-width: 900px) {
  body {
    height: auto;

    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;
  }


  #scrollytelling-wrapper {
    height: auto;

    min-height: 100vh;
  }


  #graphic-fixed-box {
    flex-wrap: wrap;

    min-height: auto;

    padding:
      24px 16px;
  }


  #canvas-column {
    order: 1;

    width:
      min(92vw, 580px);

    height:
      min(92vw, 580px);

    flex-basis: 100%;
  }


  #left-controls-column {
    order: 2;

    width:
      min(44vw, 280px);
  }


  #right-controls-column {
    order: 3;

    width:
      min(44vw, 280px);
  }


  #timeline-belt-outer {
    height: 320px;

    width: 100%;
  }


  .text-display-box {
    width: 100%;
  }
}


/*
 * Phone
 */

@media (max-width: 600px) {
  #graphic-fixed-box {
    flex-direction: column;

    flex-wrap: nowrap;

    gap: 18px;
  }


  #canvas-column {
    order: 1;

    width:
      min(94vw, 520px);

    height:
      min(94vw, 520px);
  }


  #left-controls-column,
  #right-controls-column {
    width:
      min(94vw, 420px);
  }


  #left-controls-column {
    order: 2;
  }


  #right-controls-column {
    order: 3;
  }


  #notable-profile-sidebar {
    height: 330px;
  }


  .profile-avatar-frame {
    width: 115px;

    height: 115px;
  }


  #timeline-belt-outer {
    grid-template-rows:
      120px 90px 120px;

    height: 330px;
  }


  #timeline-scroll-container {
    height: 90px;
  }


  .text-display-box {
    height: 120px;
  }


  .info-card {
    width:
      min(300px, calc(100vw - 24px));
  }
}

/* =========================================================
   TIMELINE NOTE CARD CONTAINMENT FIX
   Append this to the END of the existing stylesheet.
   ========================================================= */

/*
 * Prevent cards from extending outside the white
 * timeline section vertically.
 */
#timeline-belt-outer {
  overflow: hidden;
}


/*
 * Give each note lane enough internal containment.
 * This does NOT change the timeline grid structure.
 */
.text-display-box {
  overflow: hidden;
}


/*
 * Keep cards safely within each note lane.
 */
.info-card {
  width: 310px;
  max-width: calc(100vw - 24px);

  padding: 10px 14px;

  /*
   * Prevent a long description from making
   * the card taller than its 110px lane.
   */
  max-height: 96px;
  overflow: hidden;
}


/*
 * Slightly tighten text so the existing descriptions
 * fit without changing the overall visual style.
 */
.info-card h2 {
  font-size: 13px;
  line-height: 1.15;
}

.info-card p {
  font-size: 10px;
  line-height: 1.3;
}