/* -----------------------------------------------------------
   FINAL tribute page styling — Image first, 50% width, polished
------------------------------------------------------------ */

:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --ink:#131418;
  --muted:#57606a;
  --accent:#d96a00;
  --radius:12px;
  --shadow:0 10px 30px rgba(44,62,80,0.08);
  --max-width:980px;
  --transition:220ms ease;
  --readable-width:64ch;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
}

/* Layout wrappers */
.wrap{max-width:var(--max-width);margin:0 auto;padding:1rem}

/* Header */
.site-header{padding:1rem 0;border-bottom:1px solid #ddd}
.site-title{margin:0;font-size:1.6rem}
.site-sub{margin:0;color:var(--muted);}

/* Card container */
.card{
  background:var(--card);
  padding:2rem;
  border-radius:var(--radius);
  margin-top:2rem;
  box-shadow:var(--shadow);
}

/* ⭐ HERO IMAGE — AT TOP, 50% WIDTH ⭐ */
.hero{text-align:center;margin-bottom:2rem;}
.hero img{
  width:50%;
  max-width:600px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
  transition:transform var(--transition);
}
.hero img:hover{transform:scale(1.03)}
#img-caption{
  margin-top:.5rem;
  color:var(--muted);
  font-size:.95rem;
}

/* Grid: text + timeline/facts */
.content-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:2rem;
  margin-top:1.5rem;
}

/* Readable text */
.readable{
  max-width:var(--readable-width);
  color:var(--muted);
}

/* Fact sheet */
.fact-sheet dt{font-weight:bold;margin-top:.5rem}
.fact-sheet dd{margin:0 0 .5rem;color:var(--muted)}

/* Timeline */
.timeline-list{
  list-style:none;
  padding:0;
  counter-reset:step;
}
.timeline-list li{
  padding-left:2rem;
  border-left:2px solid #ddd;
  margin-bottom:1rem;
  position:relative;
}
.timeline-list li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:-1rem;
  top:0;
  background:var(--accent);
  color:#fff;
  width:1.6rem;
  height:1.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-weight:bold;
}
.timeline-list time{font-weight:bold;color:var(--ink)}

/* Buttons */
.actions{margin-top:2rem;display:flex;gap:1rem}
.button{
  padding:.6rem 1rem;
  border-radius:999px;
  border:2px solid var(--accent);
  color:var(--accent);
  font-weight:bold;
  text-decoration:none;
  transition:.2s;
}
.button:hover{
  background:var(--accent);
  color:white;
}
.button.ghost{
  border-color:#ccc;
  color:var(--muted);
}

/* Footer */
.site-footer{
  text-align:center;
  padding:1.5rem 0;
  margin-top:2rem;
  border-top:1px solid #ddd;
  color:var(--muted);
}

/* Responsive */
@media(max-width:800px){
  .content-grid{
    grid-template-columns:1fr;
  }
  .hero img{
    width:70%;
  }
}