/* CASALIV history. A normal-flow timeline; all content is readable without JS. */
.history-section {
  --history-bg: #191b18;
  --history-paper: #f3f2ee;
  --history-muted: #b3b4aa;
  --history-bronze: #ba9778;
  --history-track: #49473f;
  --history-axis: 50%;
  background: var(--history-bg);
  color: var(--history-paper);
  padding-block: 112px 82px;
  overflow: clip;
}
.history-heading {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 60px;
  max-width: 1260px;
  margin: 0 auto 92px;
}
.history-heading .section-label { color: var(--history-muted); }
.history-heading h2 {
  margin-top: 28px;
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.045em;
}
.history-heading h2 em { color: #a9ab9f; }
.history-intro {
  max-width: 350px;
  justify-self: end;
  color: var(--history-muted);
  font-size: 14px;
  line-height: 1.85;
  padding-bottom: 3px;
}
.history-timeline { position: relative; max-width: 1120px; margin-inline: auto; }
.history-steps { position: relative; list-style: none; margin: 0; padding: 0; }
.history-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
  padding-bottom: 62px;
  min-height: 302px;
}
.history-step:last-child { padding-bottom: 0; min-height: 0; }
/* This per-row line is the CSS-only fallback, exact even when text wraps. */
.history-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: var(--history-axis);
  top: 39px;
  bottom: -39px;
  width: 1px;
  background: var(--history-bronze);
}
.history-node {
  position: absolute;
  left: var(--history-axis);
  top: 39px;
  z-index: 2;
  width: 11px;
  height: 11px;
  border: 1px solid var(--history-bronze);
  border-radius: 50%;
  background: var(--history-bronze);
  transform: translate(-50%, -50%);
}
.history-card { grid-column: 1; min-width: 0; max-width: 440px; }
.history-step:nth-child(odd) .history-card { justify-self: end; }
.history-step:nth-child(even) .history-card { grid-column: 3; }
.history-year {
  margin: 0 0 24px;
  color: var(--history-bronze);
  font-size: clamp(64px, 6vw, 82px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.06em;
  font-variant-numeric: lining-nums tabular-nums;
}
.history-year-note {
  display: inline-block;
  vertical-align: top;
  margin: 8px 0 0 6px;
  font-size: 18px;
  letter-spacing: 0;
}
.history-year-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 8px;
  min-height: 82px;
  font-size: clamp(29px, 3.1vw, 44px);
  letter-spacing: -.055em;
}
.history-year-group > span { color: #77766c; font-size: .58em; }
.history-kicker {
  margin: 0 0 13px;
  color: var(--history-muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.8px;
  line-height: 1.6;
}
.history-card h3 {
  margin: 0 0 16px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.7px;
  overflow-wrap: break-word;
}
.history-description { margin: 0; max-width: 365px; color: var(--history-muted); font-size: 14px; line-height: 1.85; }
.history-source {
  max-width: 1120px;
  margin: 72px auto 0;
  border-top: 1px solid #ffffff1c;
  padding-top: 22px;
  color: var(--history-muted);
  font-size: 10px;
  line-height: 1.9;
}
.history-source a { color: var(--history-paper); text-decoration: underline; text-underline-offset: 3px; }
.history-source a:focus-visible { outline: 2px solid var(--history-bronze); outline-offset: 4px; }
.history-rail { display: none; }
/* JavaScript only enhances the decorative spine and its markers. */
.history-ready .history-step::before { display: none; }
.history-ready .history-rail {
  display: block;
  position: absolute;
  left: var(--history-axis);
  top: var(--history-rail-top, 39px);
  height: var(--history-rail-height, 0px);
  width: 1px;
  background: var(--history-track);
}
.history-rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--history-bronze);
  transform: scaleY(var(--history-progress, 1));
  transform-origin: top center;
}
.history-ready .history-node {
  background: var(--history-bg);
  border-color: #777467;
  transition: background-color .2s ease, border-color .2s ease;
}
.history-ready .history-step.is-reached .history-node { background: var(--history-bronze); border-color: var(--history-bronze); }
.history-ready .history-step.is-current .history-node { outline: 1px solid #ba977852; outline-offset: 5px; }
.history-static .history-rail-fill,
.paused .history-section .history-rail-fill,
.history-section.paused .history-rail-fill { transform: scaleY(1); }
.history-static .history-node,
.paused .history-section .history-node,
.history-section.paused .history-node { background: var(--history-bronze); border-color: var(--history-bronze); outline: none !important; transition: none; }
@media (max-width: 800px) {
  .history-section { --history-axis: 7px; padding-block: 72px 58px; }
  .history-heading { grid-template-columns: 1fr; gap: 25px; margin-bottom: 56px; }
  .history-heading h2 { margin-top: 24px; font-size: clamp(36px, 8.5vw, 48px); letter-spacing: -.045em; }
  .history-intro { justify-self: start; max-width: 400px; font-size: 13px; }
  .history-step { display: block; padding: 0 0 58px 43px; min-height: 0; }
  .history-step:last-child { padding-bottom: 0; }
  .history-card { max-width: 100%; }
  .history-year { font-size: 62px; margin-bottom: 22px; }
  .history-year-group { font-size: clamp(25px, 6.3vw, 36px); min-height: 62px; column-gap: 7px; }
  .history-node { top: 31px; width: 9px; height: 9px; }
  .history-step:not(:last-child)::before { top: 31px; bottom: -31px; }
  .history-card h3 { font-size: 23px; }
  .history-kicker { font-size: 8px; letter-spacing: 1.45px; }
  .history-description { max-width: 440px; font-size: 13px; line-height: 1.85; }
  .history-source { margin-top: 48px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .history-section .history-rail-fill { transform: scaleY(1); }
  .history-section .history-node { background: var(--history-bronze); border-color: var(--history-bronze); transition: none; outline: none !important; }
}
/* Comfortable reading at every viewport. */
.history-intro,.history-description{font-size:16px;line-height:1.75}.history-kicker{font-size:11px;line-height:1.6}.history-source{font-size:14px;line-height:1.75}