:root {
  --slate: #4c5459;
  --sky: #aabbbf;
  --mist: #ccd9d7;
  --earth: #40371e;
  --midnight: #0d0d0d;
  --taupe: #998f89;
  --frost: #c8d2d1;

  /* Translucent colors — 90% opacity */
  --to-read-bg: #aabbbfe6;
  --in-progress-bg: #998f89e6;
  --read-bg: #c8d2d1e6;

  --mist-bg: #ccd9d7d9; /* 85% opacity */
}

body {
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--midnight);

  padding: 30px;
  background-image: url("scenic-road-dimitar-donovski.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

h1 {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 8px;
}

.subtitle {
  margin: 0 0 24px;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--earth);
}

table {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  border-collapse: separate;
  border-spacing: 0 16px;
}

tbody tr {
  background-color: transparent;
}

th,
td {
  border: 1px solid #ccc;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #333;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Book title and metadata */
.book-title {
  display: block;
  font-family: "Lora", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.book-meta {
  margin: 8px 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: #252a2d;
}

.book-meta > * + * {
  margin-left: 6px;
}

.book-pitch {
  margin: 8px 0 0;
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.55;
}

/* Book row backgrounds */

tr[class="to-read"] {
  background-image: linear-gradient(
    to right,
    #aabbbff5 0%,
    var(--to-read-bg) 65%,
    var(--mist-bg) 100%
  );
}

tr[class="in-progress"] {
  background-image: linear-gradient(
    to right,
    #998f89f5 0%,
    #998f89de 55%,
    var(--mist-bg) 100%
  );
}

tr[class="read"] {
  background-image: linear-gradient(
    to right,
    #c8d2d1f5 0%,
    var(--read-bg) 65%,
    var(--mist-bg) 100%
  );
}

span {
  display: inline-block;
}

/* Left edge status accents */

tr[class="to-read"] td:first-child {
  border-left: 6px solid var(--slate);
}

tr[class="in-progress"] td:first-child {
  border-left: 6px solid var(--taupe);
}

tr[class="read"] td:first-child {
  border-left: 6px solid var(--earth);
}

/* Status badges */

tbody td:last-child {
  text-align: center;
}

span[class="status"] {
  width: auto;
  height: auto;
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

tr[class="to-read"] span[class="status"] {
  background-image: none;
  background-color: var(--slate);
  border: 1px solid var(--slate);
  color: white;
}

tr[class="in-progress"] span[class="status"] {
  background-image: none;
  background-color: var(--taupe);
  border: 1px solid var(--taupe);
  color: var(--midnight);
}

tr[class="read"] span[class="status"] {
  background-image: none;
  background-color: var(--earth);
  border: 1px solid var(--earth);
  color: white;
}

/* Status and rating dimensions */

span[class="status"],
span[class^="rate"] {
  height: 25px;
  width: 100px;
  padding: 5px;
}

/* Rating indicators */

span[class^="rate"] > span {
  border: 1px solid #777;
  border-radius: 50%;
  margin: 2px;
  height: 15px;
  width: 15px;
  background-color: #ddd;
}

span[class~="one"] > span:first-child {
  background-image: linear-gradient(#b69b62, #8c713f);
}

span[class~="two"] > span:nth-child(-n + 2) {
  background-image: linear-gradient(#b69b62, #8c713f);
}

span[class~="three"] > span {
  background-image: linear-gradient(#b69b62, #8c713f);
}

.rating-label {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: #252a2d;
  white-space: nowrap;
}

.audible-link {
  color: var(--earth);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.audible-link:hover,
.audible-link:focus-visible {
  color: var(--midnight);
  text-decoration-thickness: 2px;
}

/* Reading list reflection */

.reflection {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin: 32px auto 0;
  padding: 24px;
  background-color: var(--mist-bg);
  border-top: 4px solid var(--earth);
}

.reflection-content {
  max-width: 75ch;
  margin-inline: auto;
  text-align: left;
}

.reflection h2 {
  margin: 0 0 24px;
  font-family: "Lora", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--earth);
}

.reflection p {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.reflection p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .reflection {
    padding: 40px;
  }
}