:root {
  --page-bg: #f8ecd8;
  --card-bg: #fffaf0;
  --text: #2b0a10;
  --accent: #ae0022;
  --accent-text: #fff4e6;
  --title: #ae0022;
  --orange: #ae0022;
  --muted: #7a5a55;
  --apricot: #d9c3a3;
  --line: rgba(43, 10, 16, 0.15);
  --dark-card: #6e0016;

  /* hover row tints: pastel versions of olive, tan and cherry */
  --read-1: #d4e6b4;  --read-2: #eef6df;
  --progress-1: #f1d6b8;  --progress-2: #faeedf;
  --toread-1: #f3b8c1;  --toread-2: #fbe3e6;

  --read-text: #2f4a1c;
  --progress-text: #5a3512;
  --toread-text: #6e0016;

  /* status badge text + border */
  --read-badge-1: #3f5e2a;  --read-badge-2: #6a8e50;
  --progress-badge-1: #7a4a1c;  --progress-badge-2: #dbaa7f;
  --toread-badge-1: #8a001b;  --toread-badge-2: #ae0022;

  --empty-star: #efe1c8;
}

body {
  margin: 0;
  padding: 0 16px 40px;
  background: var(--page-bg);
  color: var(--text);
  font-family: "Courier Prime", "Courier New", monospace;
  line-height: 1.5;
}

header {
  text-align: center;
  margin: 0 -16px 32px;
  padding: 32px 16px 28px;
  background: var(--dark-card);
  border-bottom: 4px solid #dbaa7f;
}

h1 {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fbeadc;
}

.tagline {
  margin: 4px 0 0;
  font-style: italic;
  color: #e9c9a8;
}

main {
  max-width: 1250px;
  margin: 0 auto;
}


.table-wrap {
  overflow-x: auto;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--card-bg);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: var(--accent);
  color: var(--accent-text);
  padding: 14px 12px;
  text-align: left;
  white-space: nowrap;
}

td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
}

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

th,
td:nth-child(n + 2) {
  text-align: center;
}

td:nth-child(1) { min-width: 420px; }

h1,
h2,
th,
td strong {
  font-family: "Fraunces", Georgia, serif;
}

th {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

td strong {
  display: block;
  font-size: 1.3rem;
  color: var(--title);
}

.meta {
  color: var(--muted);
}

.book-image {
  float: left;
  margin-right: 1rem;
}

.book-image img {
  display: block;
  width: 70px;
  height: auto;
  border-radius: 3px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.book-info {
  overflow: hidden;
}

/* hover motion: cover tilts, badge and rating pop */
td,
.book-image img,
span[class="status"],
span[class^="rate"] > span {
  transition:
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

tbody tr:hover .book-image img {
  transform: scale(1.125) rotate(-4deg);
  box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.4);
}

tbody tr:hover span[class="status"],
tbody tr:hover span[class^="rate"] > span {
  transform: scale(1.125);
}

@media (prefers-reduced-motion: reduce) {
  td,
  .book-image img,
  span[class="status"],
  span[class^="rate"] > span {
    transition: none;
  }

  tbody tr:hover .book-image img,
  tbody tr:hover span[class="status"],
  tbody tr:hover span[class^="rate"] > span {
    transform: none;
  }
}

td p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}

.pitch {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
}


tr[class="read"] {
  background-color: var(--read-2);
  background-image: linear-gradient(0deg, var(--read-1), var(--read-2));
}

tr[class="to-read"] {
  background-color: var(--toread-2);
  background-image: linear-gradient(0deg, var(--toread-1), var(--toread-2));
}

tr[class="in-progress"] {
  background-color: var(--progress-2);
  background-image: linear-gradient(0deg, var(--progress-1), var(--progress-2));
}

tbody tr[class] {
  background-color: var(--card-bg);
  background-image: none;
  color: var(--text);
}

tbody tr[class="read"]:hover {
  background-color: var(--read-2);
  background-image: linear-gradient(0deg, var(--read-1), var(--read-2));
  color: var(--read-text);
}

tbody tr[class="to-read"]:hover {
  background-color: var(--toread-2);
  background-image: linear-gradient(0deg, var(--toread-1), var(--toread-2));
  color: var(--toread-text);
}

tbody tr[class="in-progress"]:hover {
  background-color: var(--progress-2);
  background-image: linear-gradient(0deg, var(--progress-1), var(--progress-2));
  color: var(--progress-text);
}

span {
  display: inline-block;
}

span[class="status"] {
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* flat outlined badges: tinted fill, colored border + text */
tr[class="read"] span[class="status"] {
  color: var(--read-badge-1);
  border: 1px solid var(--read-badge-2);
  background: rgba(106, 142, 80, 0.2);
}

tr[class="to-read"] span[class="status"] {
  color: var(--toread-badge-1);
  border: 1px solid var(--toread-badge-2);
  background: rgba(174, 0, 34, 0.1);
}

tr[class="in-progress"] span[class="status"] {
  color: var(--progress-badge-1);
  border: 1px solid var(--progress-badge-2);
  background: rgba(219, 170, 127, 0.3);
}

span[class^="rate"] {
  white-space: nowrap;
}

span[class^="rate"] > span {
  border: 1px solid var(--apricot);
  border-radius: 50%;
  margin: 0 2px;
  height: 22px;
  width: 22px;
  background-color: var(--empty-star);
}

span[class~="one"] > :first-child {
  background-color: var(--orange);
  border-color: var(--orange);
}

span[class~="two"] > :nth-child(-n + 2) {
  background-color: var(--orange);
  border-color: var(--orange);
}

span[class~="three"] span {
  background-color: var(--orange);
  border-color: var(--orange);
}

.reflection {
  margin-top: 32px;
  padding: 20px 28px;
  background: var(--dark-card);
  color: #fbeadc;
  border-left: 6px solid #dbaa7f;
  border-radius: 6px;
}

h2 {
  margin-top: 0;
  color: #dbaa7f;
}

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