/* styles.css - external stylesheet for all pages */
:root{
  --max-width: 1000px;
  --accent: #ff4655;
  --bg: #0b0f14;
  --panel: #0f1720;
  --muted: #aab3bf;
  --radius: 12px;
}

*{box-sizing:border-box}

body{
  margin:10px;
  background: linear-gradient(180deg,#071019 0%, #0b0f14 100%);
  color:var(--muted);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
}

.container{
  max-width:var(--max-width);
  margin:20px auto;
  padding:24px;
  background:rgba(255,255,255,0.02);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(2,6,12,0.6)
}

header h1{
  margin:0 0 6px 0;
  text-align:center;
  color:white;
  font-size:2rem
}

header h2{
  margin:0;
  text-align:center;
  color:var(--muted);
  font-weight:400
}

nav{
  display:flex;
  gap:12px;
  justify-content:center;
  padding:12px 0
}

nav a{
  color:var(--muted);
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px
}

nav a:hover{
  background:rgba(255,70,85,0.08);
  color:var(--accent)
}

main{padding:18px}

.article{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  padding:18px;
  border-radius:10px
}

figure{
  margin:12px 0;
  border-radius:8px;
  overflow:hidden
}

figcaption{
  font-size:0.9rem;
  color:#c6ccd6;
  padding:8px;
  background:rgba(255,255,255,0.01)
}

img.responsive{
  max-width:100%;
  height:auto;
  display:block
}

footer{
  text-align:center;
  padding:14px;
  margin-top:18px;
  color:var(--muted);
  font-size:0.85rem
}

footer a{color:var(--muted)}

/* Video Wrapper */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  margin-top: 12px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Audio styling & centering */
.audio-wrapper {
  display: flex;
  justify-content: center;  /* horizontal center */
  align-items: center;      /* vertical center inside wrapper */
  min-height: 50px;         /* optional: adjust height if needed */
  margin-top: 12px;
  margin-bottom: 18px;
}

.audio-player {
  width: 100%;
  max-width: 500px;
}

/* Small screens */
@media (max-width:600px){
  header h1{font-size:1.4rem}
}

/* Utility */
.email{color:var(--accent);text-decoration:none}
.kicker{color:var(--accent);font-weight:600}