/* GEMTEC 40 Years of Growth timeline styles */
/* Save as /timeline/timeline.css beside the HTML. */

#page.growth-timeline {
  --red: #a42a36;
  --dark: #404040;
  --mid: #666;
  --font: "PT Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --card-mark: 62px;
  --tab-mark: 44px;
  --tab-height: 86px;
}

#page.growth-timeline .timeline-shell,
#page.growth-timeline .timeline-shell * {
  box-sizing: border-box;
}

#page.growth-timeline {
  font-family: var(--font);
}

#page.growth-timeline :is(.growth-copy, .growth-copy *, .growth-stat-box, .growth-stat-box *, .info-card, .info-card *, .era-tab, .era-tab *, .mobile-era-picker button, .mobile-era-picker button *) {
  font-family: var(--font);
}

/* Intro and stats */
#page.growth-timeline .growth-intro {
  margin-bottom: 1.75rem;
}

#page.growth-timeline .growth-intro-stats {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, .8fr);
  gap: 16px;
  align-items: stretch;
}

#page.growth-timeline .growth-copy,
#page.growth-timeline .growth-stat-box {
  border-radius: 0;
  box-shadow: none;
}

#page.growth-timeline .growth-copy {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #e2e2e2;
}

#page.growth-timeline .growth-copy h2 {
  margin: 0 0 .6rem;
  color: var(--dark);
  line-height: .95;
  font-weight: 700;
}

#page.growth-timeline .growth-copy p {
  max-width: 48rem;
  margin: 0;
  color: var(--dark);
  line-height: 1.45;
}

#page.growth-timeline .growth-stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

#page.growth-timeline .growth-stat-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.05rem;
  background: var(--dark);
  color: #fff;
  border: 1px solid #e2e2e2;
}

#page.growth-timeline .growth-stat-box:nth-child(2) {
  background: var(--red);
}

#page.growth-timeline .growth-stat-box strong {
  margin-bottom: .45rem;
  color: #fff;
  line-height: .95;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  white-space: nowrap;
}

#page.growth-timeline .growth-stat-box span {
  color: #fff;
  line-height: 1.2;
}

/* Shared intro small text; large text sized per box */
#page.growth-timeline .growth-copy h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.8rem);
}

#page.growth-timeline :is(.growth-copy p, .growth-stat-box span) {
  font-size: 1rem;
}

/* Graph stage */
#page.growth-timeline .timeline-shell {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-top: 5px solid var(--red);
}

#page.growth-timeline .stage {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.68) 44%, rgba(0,0,0,.38) 76%, rgba(0,0,0,.16) 100%),
    linear-gradient(135deg, #111, #3f151b 72%, #a42a36);
}

#page.growth-timeline .graph-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--tab-height);
  height: 446px;
  z-index: 1;
}

#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .grid-line {
  stroke: rgba(255,255,255,.12);
  stroke-width: 1;
}

#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .area {
  opacity: .75;
}

/* Brushstroke: one tapered ribbon, thin at 1986 and loaded at 2026.
   The base ribbon is painted with an ink gradient set in the SVG, so no fill here. */
#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .ribbon-active {
  fill: #c70d00;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.38));
}

#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .era-window {
  display: none;
}

#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .dot,
#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .dot-current {
  fill: var(--red);
  stroke: #fff;
}

#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .dot {
  stroke-width: 2.4;
}

#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .dot-current {
  stroke-width: 3.4;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .dot-label {
  opacity: .95;
  fill: rgba(255,255,255,.95);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: rgba(0,0,0,.55);
  stroke-width: 1.2px;
  stroke-linejoin: round;
  pointer-events: none;
}

#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .dot-group:hover .dot-label {
  opacity: 1;
}

#page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .year {
  fill: rgba(255, 255, 255, 0.897);
  font-family: "PT Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

#page.growth-timeline .era-highlight {
  position: absolute;
  top: 0;
  bottom: calc(var(--tab-height) + 34px);
  z-index: 2;
  pointer-events: none;
  background: rgba(255,255,255,.10);
  border-left: 1px solid rgba(255,255,255,.18);
  border-right: 1px solid rgba(255,255,255,.18);
  transition: left 250ms ease-out, width 250ms ease-out;
}

/* Info cards */
#page.growth-timeline .era-slide {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

#page.growth-timeline .era-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

#page.growth-timeline .info-card {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 5;
  width: min(410px, calc(100% - 40px));
  padding: 20px 20px 18px;
  background: rgba(255,255,255,.95);
  border-top: 6px solid var(--red);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
  will-change: left;
  pointer-events: auto;
}

#page.growth-timeline .card-top {
  display: grid;
  grid-template-columns: var(--card-mark) 1fr;
  gap: 16px;
  align-items: start;
}

/* Generation numeral, in place of the old headshot */
#page.growth-timeline .gen-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--card-mark);
  height: var(--card-mark);
  background: var(--red);
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
}

#page.growth-timeline .card-era,
#page.growth-timeline .detail-list li {
  color: var(--dark);
  font-weight: 700;
}

#page.growth-timeline .info-card .detail-list > li {
  font-weight: 400;
}

#page.growth-timeline .card-era {
  margin-bottom: 8px;
  font-size: .95rem;
  line-height: 1.15;
}

#page.growth-timeline .card-era span {
  display: block;
  margin-bottom: 6px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: .08em;
}

#page.growth-timeline .card-era span {
  font-size: .7rem;
}

#page.growth-timeline .people {
  color: var(--red);
  font-family: var(--font);
  font-size: 3.35rem;
  line-height: .88;
  font-weight: 700;
  letter-spacing: -.04em;
}

#page.growth-timeline .people span {
  display: block;
  margin-top: 8px;
  color: var(--dark);
  font-size: .72rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#page.growth-timeline .detail-list {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

#page.growth-timeline .detail-list li {
  position: relative;
  padding-left: 16px;
  font-size: .82rem;
  line-height: 1.25;
}

#page.growth-timeline .detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  transform: translateY(-50%);
}

/* Generation marker in the tabs */
#page.growth-timeline .tab-mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--tab-mark);
  height: var(--tab-mark);
  border: 2px solid #d3d3d3;
  color: var(--mid);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

#page.growth-timeline .era-tab.active .tab-mark {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Generation tabs */
#page.growth-timeline .era-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid #d7d7d7;
}

#page.growth-timeline .era-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tab-height);
  padding: 14px 12px;
  appearance: none;
  border: 0;
  border-left: 1px solid #dedede;
  background: #f7f7f7;
  color: var(--dark);
  text-align: left;
  cursor: pointer;
}

#page.growth-timeline .era-tab:first-child {
  border-left: 0;
}

#page.growth-timeline .era-tab::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: transparent;
}

#page.growth-timeline .era-tab:hover {
  background: #f1e7e8;
}

#page.growth-timeline .era-tab.active {
  background: #fff;
}

#page.growth-timeline .era-tab.active::before {
  background: var(--red);
}

#page.growth-timeline .tab-content,
#page.growth-timeline :is(.tab-years, .tab-name, .tab-growth) {
  display: block;
}

#page.growth-timeline .tab-content {
  min-width: 0;
}

#page.growth-timeline :is(.tab-years, .tab-name, .tab-growth) {
  font-weight: 700;
  line-height: 1.15;
}

#page.growth-timeline .tab-years {
  margin-bottom: 3px;
  color: var(--dark);
  font-size: 1rem;
}

#page.growth-timeline .tab-name {
  margin-bottom: 4px;
  color: var(--red);
  font-size: .94rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page.growth-timeline .tab-growth {
  color: var(--mid);
  font-size: .72rem;
}

/* Hidden legacy/helper elements */
#page.growth-timeline :is(.growth-caption, .mobile-hint, .nav-arrows, .tab-action, .mobile-graph, .mobile-era-picker) {
  display: none;
}

/* Tablet */
@media screen and (max-width: 63.9375em) {
  #page.growth-timeline .growth-intro-stats {
    grid-template-columns: 1fr;
  }

  #page.growth-timeline :is(.graph-bg, .graph-bg-mobile) .dot-label {
    display: none;
  }


  #page.growth-timeline .stage {
    min-height: 640px;
  }

#page.growth-timeline .graph-bg {
    height: 426px;
    bottom: calc(var(--tab-height) + 18px);
  }

  #page.growth-timeline .era-highlight {
    bottom: calc(var(--tab-height) + 34px + 18px);
  }

  #page.growth-timeline .era-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(4, 210px);
  }
}

/* Mobile */
@media screen and (max-width: 37.4375em) {
  #page.growth-timeline .growth-copy {
    padding: 1.35rem;
  }

  #page.growth-timeline .growth-copy h2 {
    font-size: 2.65rem;
  }

  #page.growth-timeline .growth-stat-row {
    grid-template-columns: repeat(2, minmax(135px, 1fr));
  }

  #page.growth-timeline .growth-stat-box {
    min-height: 112px;
    padding: 1rem;
  }

  #page.growth-timeline .timeline-shell {
    overflow: visible;
  }

  #page.growth-timeline .stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    background: #fff;
  }

  #page.growth-timeline .graph-bg,
  #page.growth-timeline .era-tabs {
    display: none;
  }

  #page.growth-timeline .era-highlight {
    display: block;
    top: 0;
    bottom: auto;
    height: 165px;
    z-index: 2;
  }

  #page.growth-timeline .mobile-graph {
    order: 1;
    display: block;
    height: 165px;
    flex: 0 0 auto;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.48)),
      linear-gradient(135deg, #141414, #771f28);
    border-bottom: 1px solid rgba(255,255,255,.2);
  }

  #page.growth-timeline .mobile-graph .graph-bg-mobile {
    width: 100%;
    height: 165px;
  }

  #page.growth-timeline .graph-bg-mobile .year {
    font-size: 12px;
  }

  #page.growth-timeline .mobile-era-picker {
    order: 2;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 14px;
    background: #f4f4f4;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    scrollbar-width: none;
    flex: 0 0 auto;
  }

  #page.growth-timeline .mobile-era-picker::-webkit-scrollbar {
    display: none;
  }

  #page.growth-timeline .mobile-era-picker button {
    flex: 0 0 auto;
    min-width: 158px;
    padding: 9px 11px;
    appearance: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    color: var(--dark);
    font-size: .82rem;
    line-height: 1.18;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  #page.growth-timeline .mobile-era-picker button span {
    display: block;
    margin-bottom: 3px;
    color: var(--mid);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
  }

  #page.growth-timeline .mobile-era-picker button.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }

  #page.growth-timeline .mobile-era-picker button.active span {
    color: rgba(255,255,255,.82);
  }

  #page.growth-timeline .era-slide {
    order: 3;
    position: relative;
    display: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #page.growth-timeline .era-slide.active {
    display: block;
    animation: mobileFade 1s ease;
  }

  @keyframes mobileFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  #page.growth-timeline .info-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 18px 24px;
    box-shadow: none;
    border-top-width: 5px;
  }

  #page.growth-timeline .card-top {
    grid-template-columns: var(--card-mark) 1fr;
  }

  #page.growth-timeline .people {
    font-size: 2.9rem;
  }

  #page.growth-timeline .detail-list li {
    font-size: .9rem;
  }
}
/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  #page.growth-timeline .stroke-layer,
  #page.growth-timeline .info-card,
  #page.growth-timeline .era-highlight,
  #page.growth-timeline .dot-group {
    transition: none !important;
    animation: none !important;
    clip-path: none !important;
  }
}