.history-page { overflow-x: clip; }

.history-page main { position: relative; z-index: 2; }
.history-hero { width: min(900px, 90%);   margin: var(--hero-top-space) auto 0;}
.history-hero h1 {  font-size: clamp(38px, 6vw, 72px); color: #fff; line-height: 1.1;  margin: 20px 0;}
.history-hero h1 span { display: block; color: #b414ae; }
.history-hero > p { max-width: 650px; margin: 24px auto 30px; color: #b8acb6; line-height: 1.8; }
.history-milestones { display: grid; grid-template-columns: repeat(3, 1fr); margin: 55px 0 0; padding: 25px 0; border-block: 1px solid #51204d; gap: 16px; color: #a99da7; font-size: 14px; }
.history-milestones strong { display: block; color: #ee86e6; font-size: clamp(22px, 3vw, 32px); margin-bottom: 8px; }
.history-intro { width: min(760px, 90%); margin: 75px auto; padding: clamp(24px, 4vw, 40px); text-align: left; border: 1px solid #51204d; border-radius: 20px; background: radial-gradient(ellipse at top left, #32132f, #191319 75%); }
.history-intro h2, .history-takeaway h2 { font-size: clamp(24px, 3vw, 32px); color: #f4e8f2; line-height: 1.3; }
.history-intro p, .history-takeaway p { color: #b8acb6; line-height: 1.8; }
.history-intro strong { color: #eecef0; font-weight: 400; }
.history-jumps { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: min(1000px, 90%); margin: 0 auto 65px; }
.history-jumps a { color: #e1c5df; text-decoration: none; padding: 12px 18px; border: 1px solid #51204d; border-radius: 30px; background: #191319; transition: background .25s, border-color .25s; }
.history-jumps a:hover { background: #381435; border-color: #b414ae; }
.history-timeline-section { width: min(1060px, 90%); margin: auto; }
.history-timeline { list-style: none; position: relative; padding: 0; margin: 55px 0 0; text-align: left; }
.history-timeline::before { content: ''; position: absolute; left: 130px; top: 12px; bottom: 0; width: 2px; background: linear-gradient(#ee86e6, #b414ae 60%, #32132f); }
.history-stop { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 50px; padding-bottom: 28px; scroll-margin-top: 30px; }
.history-stop::before { content: ''; position: absolute; left: 125px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: #ee86e6; box-shadow: 0 0 15px #b414ae80; }
.history-date { color: #ee86e6; font-size: 23px; padding-top: 3px; }
.history-card { padding: clamp(22px, 3vw, 34px); background: linear-gradient(135deg, #211520, #171417); border: 1px solid #40213d; border-radius: 18px; transition: border-color .25s, box-shadow .25s; }
.history-card:hover, .history-card:focus-within { border-color: #ad3aa4; box-shadow: 0 12px 35px #0004; }
.history-card .history-person { margin: 0 0 10px; color: #ee86e6; font-size: 14px; letter-spacing: .6px; }
.history-card h3 { font-size: clamp(22px, 2.5vw, 28px); line-height: 1.3; margin: 0 0 16px; color: #f6edf4; }
.history-card p { color: #b8acb6; font-size: 16px; line-height: 1.8; margin: 0 0 18px; }
.history-card details { border-top: 1px solid #51204d; padding-top: 15px; }
.history-card summary { cursor: pointer; color: #e7c6e3; line-height: 1.6; }
.history-card details p { padding: 15px 0 0; margin-bottom: 8px; }
.history-card details[open] p { animation: history-answer .3s ease both; }
.history-source { display: inline-block; color: #a69ba4; font-size: 12px; margin-top: 18px; text-underline-offset: 4px; }
.history-source:hover { color: #ee86e6; }
.history-takeaway { width: min(800px, 90%); margin: 55px auto; padding: 40px 24px; border-radius: 20px; background: radial-gradient(ellipse at top, #381435, #191319); border: 1px solid #51204d; }
.history-takeaway p { max-width: 600px; margin: 20px auto 28px; }
.history-sources { width: min(800px, 90%); margin: 60px auto; text-align: left; color: #a99da7; line-height: 1.8; }
.history-sources h2 { font-size: 22px; color: #dec8db; }
.history-sources ul { padding-left: 20px; }
.history-sources a { color: #ddadda; text-underline-offset: 4px; }
.history-page a:focus-visible, .history-page summary:focus-visible { outline: 2px solid #ee86e6; outline-offset: 5px; }
.history-skip { position: fixed; left: 12px; top: -100px; z-index: 100; padding: 12px; background: #191319; color: #fff; }
.history-skip:focus { top: 12px; }
@keyframes history-answer { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 650px) {

 .history-hero h1 {   margin-top: 30px;}
 .history-milestones { gap: 10px; font-size: 12px; }
 .history-intro { margin-block: 45px; }
 .history-timeline::before { left: 7px; }
 .history-stop { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 30px; }
 .history-stop::before { left: 2px; top: 10px; }
 .history-date { font-size: 21px; }
 .history-jumps { gap: 8px; }
 .history-jumps a { font-size: 13px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
 .history-page { scroll-behavior: auto; }
 html:has(.history-page) { scroll-behavior: auto; }
 .history-page *, .history-page *::before { animation: none !important; transition: none !important; }
}