* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1rem 3rem;
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  line-height: 1.55;
  background: #ead9bb;
  color: #2b2118;
}

/* Shopfront banner */
.shopfront {
  max-width: 62rem;
  margin: 0 auto 2rem;
  padding: 2.5rem 1rem 1.5rem;
  text-align: center;
  border-bottom: 3px double #a9792b;
}

h1 {
  margin: 0;
  font-size: 2.8rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: #24382f;
}

.tagline {
  max-width: 36rem;
  margin: 0.6rem auto 0;
  font-style: italic;
  color: #6b4f2a;
}

main {
  max-width: 62rem;
  margin: 0 auto;
}

/* Table */
.table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(60, 40, 15, 0.25);
}

table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  background: #fbf5e6;
}

th {
  background: #24382f;
  color: #f3e7cc;
  text-align: left;
  padding: 0.9rem 1rem;
  font-weight: normal;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

td {
  padding: 1rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(80, 55, 20, 0.18);
}

.book-title {
  display: block;
  font-size: 1.1rem;
  color: #24382f;
}

.profile {
  margin: 0.25rem 0;
  font-size: 0.85rem;
  color: #6b4f2a;
}

.pitch {
  margin: 0.3rem 0 0;
  max-width: 28rem;
  font-style: italic;
}

/* Row backgrounds */
tr[class="read"] {
  background-image: linear-gradient(90deg, #e1ecd3, #fbf5e6);
}

tr[class="to-read"] {
  background-image: linear-gradient(90deg, #dce6ee, #fbf5e6);
}

tr[class="in-progress"] {
  background-image: linear-gradient(90deg, #f6e2b8, #fbf5e6);
}

/* Every span */
span {
  display: inline-block;
}

/* Status badges */
tr[class="to-read"] span[class="status"] {
  border: 2px solid #4f7ca3;
  background-image: linear-gradient(#eef4f9, #c3d7e8);
}

tr[class="read"] span[class="status"] {
  border: 2px solid #5b8a4a;
  background-image: linear-gradient(#f1f8ec, #c4deb6);
}

tr[class="in-progress"] span[class="status"] {
  border: 2px solid #b8791a;
  background-image: linear-gradient(#fdf3da, #f1cf85);
}

/* Shared size for badges and rating holders */
span[class="status"],
span[class^="rate"] {
  height: 1.8rem;
  width: 7rem;
  padding: 0.2rem;
}

span[class="status"] {
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.2rem;
  border-radius: 999px;
}

/* Rating dots */
span[class^="rate"] > span {
  border: 1px solid #8a6a2a;
  border-radius: 50%;
  margin: 0 0.2rem;
  height: 1.1rem;
  width: 1.1rem;
  background-color: #efe3c6;
}

span[class~="one"] span:first-child {
  background-image: linear-gradient(135deg, #ffd45e, #e59a1f);
}

span[class~="two"] span:nth-child(-n + 2) {
  background-image: linear-gradient(135deg, #ffd45e, #e59a1f);
}

span[class~="three"] span {
  background-image: linear-gradient(135deg, #ffd45e, #e59a1f);
}

/* Reflection */
.reflection {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  padding: 1.5rem 1.75rem;
  background: #fbf5e6;
  border-left: 5px solid #a9792b;
  border-radius: 4px;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  font-weight: normal;
  color: #24382f;
}

.reflection p {
  margin: 0 0 1rem;
}

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