* { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: Georgia, "Times New Roman", serif;
    color: #2c2c2c;
    background: #faf6ef;
    line-height: 1.7;
  }
  header {
    background: linear-gradient(135deg, #1a2a4a, #3b2f1a);
    color: #f5e9c8;
    text-align: center;
    padding: 60px 20px;
  }
  header h1 { font-size: 2.6rem; margin-bottom: 10px; }
  header p { font-size: 1.1rem; font-style: italic; opacity: .9; }
  nav {
    background: #22324f;
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
  }
  nav a {
    display: inline-block;
    color: #f5e9c8;
    text-decoration: none;
    padding: 14px 18px;
    font-size: .95rem;
    transition: background .2s;
  }
  nav a:hover { background: #3b4f7a; }
  main { max-width: 860px; margin: 0 auto; padding: 40px 20px; }
  section {
    background: #fffdf8;
    border-left: 5px solid #b08d3e;
    border-radius: 6px;
    padding: 30px 34px;
    margin-bottom: 36px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  section h2 {
    color: #1a2a4a;
    font-size: 1.7rem;
    margin-bottom: 6px;
  }
  section .era {
    display: inline-block;
    font-size: .85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b08d3e;
    margin-bottom: 14px;
  }
  section h3 {
    color: #3b2f1a;
    margin: 18px 0 6px;
    font-size: 1.15rem;
  }
  section p { margin-bottom: 12px; }
  .verse {
    font-style: italic;
    color: #6b5b3e;
    border-left: 3px solid #d9c79a;
    padding-left: 14px;
    margin: 14px 0;
  }
  footer {
    text-align: center;
    padding: 30px;
    background: #1a2a4a;
    color: #cbb98a;
    font-size: .9rem;
  }
  @media (max-width: 600px) {
    header h1 { font-size: 2rem; }
    nav a { padding: 10px 10px; font-size: .85rem; }
    section { padding: 22px 20px; }
  }