/* Visual treatments for the generic Zeitleiste section. */

.timeline-toggle-wrap {
  display:flex;
  justify-content:center;
  margin-bottom:clamp(24px,3vw,36px);
}

.timeline-toggle {
  display:inline-grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  padding:4px;
  border:1px solid color-mix(in srgb,var(--wine-650) 22%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--paper) 68%,transparent);
  box-shadow:0 12px 34px rgba(71,26,37,.08);
}

.timeline-toggle button {
  min-width:clamp(145px,18vw,210px);
  min-height:46px;
  padding:9px 22px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--wine-750);
  cursor:pointer;
  font:650 .78rem/1.2 var(--sans);
  letter-spacing:.025em;
  transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease;
}

.timeline-toggle button[aria-selected="true"] {
  background:var(--wine-850);
  color:#fff;
  box-shadow:0 5px 16px rgba(71,26,37,.22);
}

.timeline-toggle button:focus-visible {
  outline:3px solid var(--rose-300);
  outline-offset:2px;
}

.is-dark .timeline-toggle {
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);
}

.is-dark .timeline-toggle button {
  color:rgba(255,255,255,.72);
}

.is-dark .timeline-toggle button[aria-selected="true"] {
  background:var(--rose-300);
  color:var(--wine-950);
}

.timeline-grid {
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:clamp(48px,10vw,148px);
  align-items:start;
}

.timeline-switchable {
  min-width:0;
}

.timeline-panels {
  display:grid;
}

.timeline-view {
  grid-area:1 / 1;
  min-width:0;
}

.timeline-copy>p {
  max-width:39ch;
}

.timeline-list {
  margin:5px 0 0;
  padding:0;
  list-style:none;
}

.timeline-list li {
  color:var(--wine-850);
}

.timeline-period {
  color:var(--wine-650);
  font-size:.7rem;
  font-weight:750;
  letter-spacing:.06em;
  overflow-wrap:normal;
  text-transform:uppercase;
  white-space:nowrap;
  word-break:normal;
}

.timeline-entry {
  min-width:0;
}

.timeline-entry h3 {
  margin:0 0 4px;
  color:var(--wine-850);
  font-family:var(--serif);
  font-size:1.28rem;
  font-weight:400;
  line-height:1.16;
}

.timeline-entry p {
  margin:0;
  font-size:.86rem;
}

/* The original timeline treatment. */
.timeline-list[data-timeline-style="classic-lines"] li {
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:24px;
  padding:20px 0 22px;
  border-top:1px solid var(--line);
}

.timeline-list[data-timeline-style="classic-lines"] .timeline-period {
  padding-top:.38em;
}

/* A fine vertical thread connects quiet, floating milestone cards. */
.timeline-list[data-timeline-style="milestone-cards"] {
  position:relative;
  display:grid;
  gap:14px;
  padding-left:34px;
}

.timeline-list[data-timeline-style="milestone-cards"]::before {
  position:absolute;
  top:12px;
  bottom:12px;
  left:8px;
  width:1px;
  background:linear-gradient(to bottom,var(--rose-300),var(--wine-650));
  content:"";
}

.timeline-list[data-timeline-style="milestone-cards"] li {
  position:relative;
  display:grid;
  gap:8px;
  padding:18px 20px 20px;
  border:1px solid color-mix(in srgb,var(--wine-650) 18%,transparent);
  border-radius:18px;
  background:color-mix(in srgb,var(--paper) 78%,transparent);
  box-shadow:0 10px 30px rgba(71,26,37,.07);
}

.timeline-list[data-timeline-style="milestone-cards"] li::before {
  position:absolute;
  top:25px;
  left:-32px;
  width:11px;
  height:11px;
  border:3px solid var(--section-bg);
  border-radius:50%;
  background:var(--wine-650);
  box-shadow:0 0 0 1px var(--wine-650);
  content:"";
}

.timeline-list[data-timeline-style="milestone-cards"] .timeline-period {
  justify-self:start;
  padding:5px 9px;
  border-radius:999px;
  background:var(--rose-100);
}

/* Periods become the visual anchors in a restrained editorial layout. */
.timeline-list[data-timeline-style="year-focus"] {
  border-top:1px solid var(--line);
}

.timeline-list[data-timeline-style="year-focus"] li {
  display:grid;
  grid-template-columns:minmax(115px,150px) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);
  align-items:baseline;
  padding:26px 0 28px;
  border-bottom:1px solid var(--line);
}

.timeline-list[data-timeline-style="year-focus"] .timeline-period {
  color:var(--wine-750);
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.3vw,2.15rem);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1;
  text-transform:none;
}

.timeline-list[data-timeline-style="year-focus"] .timeline-entry h3 {
  font-size:1.38rem;
}

/* A centered path alternates between both sides without tilting the content. */
.timeline-list[data-timeline-style="alternating-path"] {
  position:relative;
  display:grid;
  gap:20px;
  padding:8px 0;
}

.timeline-list[data-timeline-style="alternating-path"]::before {
  position:absolute;
  top:22px;
  bottom:22px;
  left:50%;
  width:1px;
  background:linear-gradient(to bottom,var(--rose-300),var(--wine-650),var(--rose-300));
  content:"";
}

.timeline-list[data-timeline-style="alternating-path"] li {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
  align-items:center;
}

.timeline-list[data-timeline-style="alternating-path"] li::before {
  z-index:1;
  grid-column:2;
  grid-row:1;
  justify-self:center;
  width:10px;
  height:10px;
  border:4px solid var(--section-bg);
  border-radius:50%;
  background:var(--wine-650);
  box-shadow:0 0 0 1px var(--wine-650);
  content:"";
}

.timeline-list[data-timeline-style="alternating-path"] .timeline-period {
  grid-column:1;
  grid-row:1;
  padding-right:8px;
  text-align:right;
}

.timeline-list[data-timeline-style="alternating-path"] .timeline-entry {
  grid-column:3;
  grid-row:1;
  padding:17px 18px 18px;
  border:1px solid color-mix(in srgb,var(--wine-650) 16%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,var(--paper) 72%,transparent);
}

.timeline-list[data-timeline-style="alternating-path"] li:nth-child(even) .timeline-period {
  grid-column:3;
  padding-right:0;
  padding-left:8px;
  text-align:left;
}

.timeline-list[data-timeline-style="alternating-path"] li:nth-child(even) .timeline-entry {
  grid-column:1;
  text-align:right;
}

/* Soft bands give every stage equal weight and a clear reading rhythm. */
.timeline-list[data-timeline-style="soft-steps"] {
  display:grid;
  gap:10px;
  counter-reset:timeline-step;
}

.timeline-list[data-timeline-style="soft-steps"] li {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:18px 20px;
  border-left:4px solid var(--wine-650);
  border-radius:4px 16px 16px 4px;
  background:color-mix(in srgb,var(--rose-100) 78%,var(--paper));
  counter-increment:timeline-step;
}

.timeline-list[data-timeline-style="soft-steps"] li:nth-child(even) {
  background:color-mix(in srgb,var(--rose-300) 26%,var(--paper));
}

.timeline-list[data-timeline-style="soft-steps"] .timeline-period {
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:8px;
  align-items:center;
}

.timeline-list[data-timeline-style="soft-steps"] .timeline-period::before {
  color:var(--wine-750);
  content:counter(timeline-step,decimal-leading-zero);
  font-size:.58rem;
  letter-spacing:.08em;
}

.is-dark .timeline-list li,
.is-dark .timeline-entry h3 {
  color:#fff;
}

.is-dark .timeline-period {
  color:var(--rose-300);
}

.is-dark .timeline-list[data-timeline-style="classic-lines"] li,
.is-dark .timeline-list[data-timeline-style="year-focus"],
.is-dark .timeline-list[data-timeline-style="year-focus"] li {
  border-color:rgba(255,255,255,.22);
}

.is-dark .timeline-list[data-timeline-style="year-focus"] .timeline-period {
  color:var(--rose-300);
}

.is-dark .timeline-list[data-timeline-style="milestone-cards"] li,
.is-dark .timeline-list[data-timeline-style="alternating-path"] .timeline-entry {
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
}

.is-dark .timeline-list[data-timeline-style="milestone-cards"] .timeline-period {
  background:rgba(255,255,255,.1);
}

.is-dark .timeline-list[data-timeline-style="soft-steps"] li {
  background:rgba(255,255,255,.08);
}

.is-dark .timeline-list[data-timeline-style="soft-steps"] li:nth-child(even) {
  background:rgba(255,255,255,.13);
}

@media (max-width:900px) {
  .timeline-toggle-wrap {
    margin-bottom:36px;
  }

  .timeline-toggle {
    width:100%;
  }

  .timeline-toggle button {
    min-width:0;
    padding-right:12px;
    padding-left:12px;
  }

  .timeline-grid {
    grid-template-columns:1fr;
    gap:36px;
  }

  .timeline-list[data-timeline-style="classic-lines"] li,
  .timeline-list[data-timeline-style="year-focus"] li,
  .timeline-list[data-timeline-style="soft-steps"] li {
    grid-template-columns:1fr;
    gap:7px;
  }

  .timeline-list[data-timeline-style="classic-lines"] .timeline-period {
    padding-top:0;
  }

  .timeline-list[data-timeline-style="year-focus"] .timeline-period {
    font-size:1.5rem;
  }

  .timeline-list[data-timeline-style="alternating-path"] {
    position:relative;
    display:grid;
    gap:14px;
    padding:0 0 0 34px;
  }

  .timeline-list[data-timeline-style="alternating-path"]::before {
    top:12px;
    bottom:12px;
    left:8px;
    background:linear-gradient(to bottom,var(--rose-300),var(--wine-650));
  }

  .timeline-list[data-timeline-style="alternating-path"] li {
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:18px 20px 20px;
    border:1px solid color-mix(in srgb,var(--wine-650) 18%,transparent);
    border-radius:18px;
    background:color-mix(in srgb,var(--paper) 78%,transparent);
    box-shadow:0 10px 30px rgba(71,26,37,.07);
  }

  .timeline-list[data-timeline-style="alternating-path"] li::before {
    position:absolute;
    top:25px;
    left:-32px;
    display:block;
    grid-column:auto;
    grid-row:auto;
    justify-self:auto;
    width:11px;
    height:11px;
    border:3px solid var(--section-bg);
    box-shadow:0 0 0 1px var(--wine-650);
  }

  .timeline-list[data-timeline-style="alternating-path"] .timeline-period,
  .timeline-list[data-timeline-style="alternating-path"] li:nth-child(even) .timeline-period,
  .timeline-list[data-timeline-style="alternating-path"] .timeline-entry,
  .timeline-list[data-timeline-style="alternating-path"] li:nth-child(even) .timeline-entry {
    grid-column:1;
    grid-row:auto;
    padding-right:0;
    padding-left:0;
    text-align:left;
  }

  .timeline-list[data-timeline-style="alternating-path"] .timeline-period,
  .timeline-list[data-timeline-style="alternating-path"] li:nth-child(even) .timeline-period {
    justify-self:start;
    padding:5px 9px;
    border-radius:999px;
    background:var(--rose-100);
  }

  .timeline-list[data-timeline-style="alternating-path"] .timeline-entry,
  .timeline-list[data-timeline-style="alternating-path"] li:nth-child(even) .timeline-entry {
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
  }

  .is-dark .timeline-list[data-timeline-style="alternating-path"] li {
    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.07);
  }

  .is-dark .timeline-list[data-timeline-style="alternating-path"] .timeline-period {
    background:rgba(255,255,255,.1);
  }
}