/* ====== USTAWIENIA ====== */
:root{
  --bg: #0a0a0a;
  --text: #cde6ff;
  --muted: #8db8d6;
  --brand: #1a6bff;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --radius: 16px;
}

/* ====== TŁO ====== */
body{
  margin:0; padding:0;
  font-family: 'Segoe UI', sans-serif;
  background: url('chronologia.jpg') no-repeat center center fixed;
  background-size: cover;
  color: var(--text);
}

/* ====== KONTENER OGÓLNY ====== */
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.lead{color:var(--muted);max-width:800px}
.back{color:var(--muted);text-decoration:none}
.back:hover{color:var(--text)}

/* ====== NAGŁÓWEK ====== */
h1{
  font-size: clamp(28px, 4vw, 48px);
  text-shadow: 0 0 10px rgba(26,107,255,0.5);
  letter-spacing: 1px;
  margin: 8px 0 12px;
}

/* ====== OVERLAY LEKKI ====== */
body::before{
  content:""; position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  pointer-events:none; z-index:-1;
}

/* ====== TIMELINE ====== */
.timeline{
  list-style:none; margin:40px 0; padding:0;
  position:relative;
}
.timeline::before{
  content:""; position:absolute; left:24px; top:0; bottom:0;
  width:2px; background: rgba(205,230,255,.25);
}
.timeline li{
  position:relative; margin:0 0 28px 0; padding-left:64px;
  background: rgba(10,15,20,.75);
  border:1px solid rgba(26,107,255,.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px 20px 16px 20px;
}
.timeline li::before{
  content: attr(data-year);
  position:absolute; left:-2px; top:50%; transform:translate(-50%,-50%);
  background:#0d1520; color:var(--text);
  border:2px solid var(--brand);
  border-radius:999px; padding:4px 10px; font-weight:600;
  box-shadow: 0 0 15px rgba(26,107,255,.35);
}
.timeline h2{
  font-size:20px; margin:0 0 6px 0;
}
.timeline p{
  margin:0; color:var(--muted); line-height:1.6;
}

/* ====== LINKI POWIĄZANE ====== */
.related{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:24px;
  flex-wrap:wrap;
}
.related a{
  text-decoration:none;
  color:#cde6ff;
  background: rgba(20,30,40,.8);
  border:1px solid rgba(26,107,255,.6);
  border-radius:12px;
  padding:8px 14px;
  font-family:'Segoe UI',sans-serif;
  font-size:14px;
  transition:.2s;
}
.related a:hover{
  background: rgba(30,45,60,.9);
  border-color: #1a6bff;
}

/* ====== STOPKA ====== */
.footer{ margin-top:40px; color:var(--muted); font-size:14px }

/* ====== BADGE ====== */
.badge{
  display:inline-block;
  background: rgba(20,30,40,0.8);
  border:1px solid var(--brand);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 12px;
}