@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@200;300;400;500;600&display=swap");

.model-timeline-shell {
  --model-timeline-accent: #090909;
  --model-timeline-canvas: #e7e8e6;
  --model-timeline-panel: #d5d7d6;
  --model-timeline-ink: #111212;
  --model-timeline-muted: #5f6262;
  --model-timeline-rule: transparent;
  --model-timeline-font: "IBM Plex Sans", Arial, sans-serif;
  --model-timeline-display-font: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --model-timeline-chart-font: "IBM Plex Sans", Arial, sans-serif;
  --model-timeline-eyebrow-color: #1a1a1a;
  --model-timeline-eyebrow-size: 0.68rem;
  --model-timeline-eyebrow-weight: 600;
  --model-timeline-eyebrow-tracking: 0.11em;
  --model-timeline-hero-category-color: #1d1e1e;
  --model-timeline-record-hover: rgb(0 0 0 / 3%);
}

.porsche-page .model-timeline-records {
  --model-timeline-rule: rgb(17 18 18 / 14%);
  background: linear-gradient(145deg, #eceeec 0%, #e3e5e3 100%);
}

.porsche-page .model-timeline-records .dataTables_filter input {
  background: #f4f5f3;
  border-color: rgb(17 18 18 / 22%);
}

.porsche-page .model-timeline-records .dataTables_filter input::placeholder {
  color: #747776;
  opacity: 1;
}

.porsche-page .model-timeline-header {
  background: linear-gradient(112deg, #eef0ee 0%, #e5e7e5 64%, #dfe1df 100%);
}

.porsche-page .model-timeline-title {
  max-width: none;
  font-size: clamp(3.6rem, 6.5vw, 7.2rem);
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 0.8;
}

.porsche-page .porsche-title-brand {
  color: #111212;
}

.porsche-page .porsche-title-theme {
  color: #6b6e6f;
  font-weight: 200;
}

.porsche-page .model-timeline-eyebrow {
  margin-bottom: 0.12rem;
}

.porsche-page .model-timeline-intro a:not(.model-timeline-instructions) {
  color: inherit;
  text-decoration-color: rgb(17 18 18 / 35%);
  text-underline-offset: 0.16em;
}

.porsche-page .model-timeline-instructions {
  position: relative;
  padding-left: 1rem;
  border-left: 0;
}

.porsche-page .model-timeline-instructions::before {
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 0.38rem;
  height: 0.38rem;
  background: var(--model-timeline-accent);
  content: "";
}

.porsche-page .model-timeline-main {
  background: linear-gradient(145deg, #eceeec 0%, #e3e5e3 100%);
}

.porsche-page .model-timeline-chart .highcharts-axis-labels text,
.porsche-page .model-timeline-chart .highcharts-axis-title {
  font-family: var(--model-timeline-chart-font) !important;
}

.porsche-page .model-timeline-hero {
  background: var(--model-timeline-panel);
  border: 0;
}

.porsche-page .model-timeline-hero-media {
  background: linear-gradient(145deg, #f0f1ef 0%, #cfd2d1 100%);
}

.porsche-page .model-timeline-hero-media::after {
  background:
    radial-gradient(circle at 60% 74%, rgb(0 0 0 / 10%), transparent 42%),
    linear-gradient(to bottom, transparent 62%, rgb(0 0 0 / 8%));
}

.porsche-page .model-timeline-hero-image {
  object-fit: cover;
  object-position: center;
  padding: 0;
  filter: none;
  mix-blend-mode: normal;
  transform: scale(1);
}

.porsche-page .model-timeline-hero.is-updating .model-timeline-hero-image {
  transform: scale(1.025);
}

.porsche-page .model-timeline-hero-watermark {
  color: rgb(17 18 18 / 18%);
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  font-weight: 500;
}

.porsche-page .model-timeline-hero-copy {
  background: #d5d7d6;
}

.porsche-page .model-timeline-hero-name {
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2.6rem, 4vw, 4.8rem);
  font-weight: 300;
  letter-spacing: -0.025em;
}

.porsche-page .model-timeline-hero-name::after {
  height: 3px;
  background: #0b0b0b;
}

.porsche-page .model-timeline-hero-link {
  color: #4e5151;
  border-bottom-color: rgb(17 18 18 / 30%);
}

.porsche-page .model-timeline-hero-link:hover,
.porsche-page .model-timeline-hero-link:focus-visible {
  color: #050505;
  border-bottom-color: #050505;
}

.porsche-page .model-timeline-tooltip small {
  color: #171717;
}

.porsche-page .model-timeline-tooltip-specs div:nth-child(-n+2) {
  grid-column: 1 / -1;
}

.porsche-page .model-timeline-tooltip-specs dd {
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.porsche-page .model-timeline-tooltip-image {
  object-fit: contain;
  background: #e4e6e4;
  filter: none;
}

@media (max-width: 640px) {
  .porsche-page .model-timeline-title {
    font-size: clamp(3.4rem, 18vw, 5.2rem);
  }

}