:root {
  --bg: #F4EDDF; --bg2: #E8E0D0; --ink: #2D3142; --dim: rgba(45,49,66,0.66);
  --accent: #8E8AD9; --teal: #89C6A1; --peach: #F4B6A6;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--ink); font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.7; min-height: 100vh;
}
header {
  display: flex; align-items: center; gap: 14px; padding: 22px 24px;
  max-width: 760px; margin: 0 auto;
}
header img { width: 44px; height: 44px; border-radius: 10px; }
header a.wordmark {
  font-family: 'Arial Black', Arial, sans-serif; font-size: 20px;
  letter-spacing: 1px; color: var(--ink); text-decoration: none;
}
header nav { margin-left: auto; display: flex; gap: 16px; }
header nav a { color: var(--dim); text-decoration: none; font-family: Arial, sans-serif; font-size: 14px; }
header nav a:hover { color: var(--ink); }
main { max-width: 760px; margin: 0 auto; padding: 12px 24px 60px; }
h1 { font-family: 'Arial Black', Arial, sans-serif; font-size: 30px; letter-spacing: 0.5px; }
h2 { font-family: Arial, sans-serif; font-size: 19px; margin-top: 34px; }
p, li { font-size: 16.5px; color: var(--ink); }
.updated { color: var(--dim); font-family: Arial, sans-serif; font-size: 13px; }
a { color: var(--accent); }
.card {
  background: rgba(255,255,255,0.55); border: 2px solid rgba(45,49,66,0.12);
  border-radius: 14px; padding: 18px 22px; margin: 18px 0;
}
.play-btn {
  display: inline-block; background: var(--ink); color: #F7F4EA; text-decoration: none;
  font-family: 'Arial Black', Arial, sans-serif; padding: 13px 26px; border-radius: 12px;
  font-size: 15px; letter-spacing: 1px;
}
footer {
  max-width: 760px; margin: 0 auto; padding: 26px 24px 44px;
  border-top: 2px solid rgba(45,49,66,0.12);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  color: var(--dim); font-family: Arial, sans-serif; font-size: 13px;
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--ink); }