:root {
      --bg: #f3eee4; /* warm parchment base */
      --text: #1e1e1e; /* tiger's eye deep brown */
      --cool: #5e6c77; /* neutral slate */
      --accent: #9c7314; /* canary gold */
      --accent-soft: #fff6b2; /* canary highlight */
      --box: #ffffff; /* soft contrast */
      --nav-bg: #d38f18;    /* rich golden-orange */
      --nav-text: #fffdf5;  /* light parchment */
      --nav-hover: #a46e12; /* deeper amber on hover */
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 1rem;
    }

    .container {
      background: var(--box);
      max-width: 720px;
      width: 100%;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(44, 29, 15, 0.1);
    }

    header {
      text-align: center;
      margin-bottom: 2rem;
    }

    header h1 {
      margin: 0;
      font-size: 2.2rem;
      color: var(--accent);
      letter-spacing: 0.5px;
    }

    header p {
      margin: 0.5rem 0 0;
      font-style: italic;
      color: var(--text);
    }

    h2 {
      color: var(--accent);
      margin-top: 2rem;
    }

    ul {
      padding-left: 1.2rem;
    }

    li {
      margin-bottom: 0.5rem;
    }

    footer {
      text-align: center;
      font-size: 0.9rem;
      margin-top: 3rem;
      color: var(--text);
    }

    a {
      color: var(--accent);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    nav {
      margin-top: 1em;
      margin-bottom: 1em;
      text-align: center;
      white-space: nowrap;
      overflow-x: auto;
    }

    nav a {
      display: inline-block;
      margin: 0 0.25em;
      padding: 0.5em 0.5em;
      text-decoration: none;
      color: var(--nav-text);
      background: var(--nav-bg);
      border-radius: 4px;
      font-weight: 600;
      transition: background 0.2s, color 0.2s;
      font-size: 0.9rem;
    }

    nav a:hover,
    nav a:focus {
      background: var(--nav-hover);
      color: #fff;
    }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: white; /* makes the whole table stand out from the background */
}

th, td {
  padding: 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #f3f3f3;
  font-weight: 600;
  font-size: 1.05rem;
}

tr:nth-child(even) td {
  background-color: #fafafa; /* visibly lighter than white, subtly striped */
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background-color: #f0f0f0;
}

strong {
  color: var(--cool);
  font-weight: 600;
  padding: 0 0.15em;
  border-radius: 2px;
}