:root{--ink:#3c2b25;--cream:#fbf7ee;--gold:#b58140;--line:#e9decd;--muted:#796c5e}
*{box-sizing:border-box}
body{margin:0;background:#f3ebde;color:var(--ink);font-family:Georgia,'Times New Roman',serif;line-height:1.6}
.page{max-width:1250px;margin:36px auto;background:var(--cream);padding:48px 50px 28px;box-shadow:0 18px 65px #49362615;border:1px solid #eadfce}
.hero{text-align:center;border-bottom:1px solid var(--line);padding:12px 0 34px}
.eyebrow{font:700 11px/1.6 Arial,sans-serif;letter-spacing:3px;color:#a0743d}
h1{font-size:clamp(42px,6vw,68px);line-height:1.05;letter-spacing:-2px;margin:13px 0 15px;font-weight:normal}
.intro{max-width:600px;margin:0 auto 26px;color:var(--muted);font-size:17px}
.shelf-summary{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.shelf-summary span{font:700 11px Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;padding:10px 16px;background:#efe4d1;color:#6d5338;border-radius:24px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:42px 0 18px}
h2{font-weight:normal;font-size:30px;line-height:1.2;margin:0}
.section-heading p{font-style:italic;color:var(--muted);margin:0}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:9px}
table{width:100%;border-collapse:collapse;min-width:760px}
th{background:#49362c;color:#fff8ec;text-align:left;font:700 11px/1.3 Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;padding:18px 14px}
td{padding:17px 14px;border-top:1px solid #e7ddcf;vertical-align:top;font-size:14px}
th:nth-child(1){width:49%}th:nth-child(2){width:16%}th:nth-child(3){width:16%}th:nth-child(4){width:11%}th:nth-child(5){width:8%}
.book-title{font-size:16px;font-weight:bold;line-height:1.35}
/* Attribute selectors for the three reading-status row gradients */
tr[class="read"]{background-image:linear-gradient(90deg,#fbf6ed,#fffaf3)}
tr[class="to-read"]{background-image:linear-gradient(90deg,#eff3ea,#f8fbf5)}
tr[class="in-progress"]{background-image:linear-gradient(90deg,#f9eedc,#fff9ee)}
span{display:inline-block}
/* Status pill styles, selected by their row attributes */
tr[class="to-read"] span[class="status"]{border:1px solid #97b397;background-image:linear-gradient(135deg,#dcebdd,#eff8ea)}
tr[class="read"] span[class="status"]{border:1px solid #bc9b6e;background-image:linear-gradient(135deg,#ead1a8,#f5e4ca)}
tr[class="in-progress"] span[class="status"]{border:1px solid #d6ad69;background-image:linear-gradient(135deg,#f8ddb0,#fff0ce)}
/* Matching dimensions for status and rating containers */
span[class="status"],span[class^="rate"]{height:34px;width:102px;padding:6px 9px}
span[class="status"]{border-radius:20px;text-align:center;white-space:nowrap;font:700 11px/20px Arial,sans-serif;color:#4c3e2e}
span[class^="rate"]{white-space:nowrap;padding-top:9px}
/* Three empty rating dots inside each rating container */
span[class^="rate"] > span{border:1px solid #bfae91;border-radius:50%;margin:0 3px 0 0;height:13px;width:13px;background-color:#fffaf2}
/* Fill one, two, or three dots based on rating class words */
span[class~="one"] > span:first-child{background-image:linear-gradient(135deg,#e8c477,#a8732d)}
span[class~="two"] > span:nth-child(-n+2){background-image:linear-gradient(135deg,#e8c477,#a8732d)}
span[class~="three"] > span{background-image:linear-gradient(135deg,#e8c477,#a8732d)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;font:12px/1.5 Arial,sans-serif;color:#6d6256}
.meta strong{color:#513d2d}
.details p{margin:9px 0 0;font-size:13px;line-height:1.55;color:#554b42}
.rating-note{font:12px/1.5 Arial,sans-serif;color:#897b6e;margin:12px 1px 0}
.reflection{max-width:830px;margin:56px auto 52px;padding:35px 44px;border-left:4px solid var(--gold);background:#f2e8d9}
.reflection h2{margin:7px 0 18px}.reflection p:not(.eyebrow){margin:12px 0;color:#55473c}
footer{text-align:center;border-top:1px solid var(--line);padding:25px 0 0;font:700 10px Arial,sans-serif;letter-spacing:2px;color:#9d8c75}
footer span{margin:0 8px;color:var(--gold)}
@media(max-width:700px){.page{margin:0;padding:28px 18px}.section-heading{display:block}.section-heading p{margin-top:6px}.reflection{padding:26px 22px;margin:40px 0}}

/* Book details stay in the Title column to keep exactly five columns. */
.book-name{font-size:16px;margin-bottom:8px}
.book-profile{font-weight:normal}
.book-profile .meta{margin-bottom:7px}
.book-profile p{margin:0;color:#554b42;font-size:13px;line-height:1.55}