/* The piece pages: plain reading pages in the box's colours. One colour scheme, no dark mode switch. */
:root { --wall: #2a0a14; --velvet: #4e1230; --gold: #c9a24b; --cream: #f2e2c4; --pink: #c4477a; --teal: #4fb3a9; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--wall); color: var(--cream); font-family: 'Crimson Pro', Georgia, serif; font-size: 18px; line-height: 1.5; }
.piece { max-width: 760px; margin: 0 auto; padding: 24px 16px 80px; }
.back { display: inline-block; margin-bottom: 18px; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); }
h1 { margin: 0; font-size: clamp(28px, 6vw, 44px); color: var(--gold); }
.series { margin: 4px 0 18px; font: italic 17px Lora, Georgia, serif; color: var(--teal); }
.art { margin: 0 0 18px; } .art img, .more img { display: block; width: 100%; height: auto; border: 3px solid var(--gold); border-radius: 6px; background: var(--velvet); }
.story { font-size: 20px; } .plain { opacity: .9; } .plain a { color: var(--gold); }
.sizes { width: 100%; border-collapse: collapse; margin: 18px 0; } .sizes caption { text-align: left; font: italic 16px Lora, Georgia, serif; padding-bottom: 6px; }
.sizes th, .sizes td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #c9a24b55; } .sizes th { color: var(--gold); font-weight: 600; }
.more { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0; } .more figure { margin: 0; }
.nextprev { display: flex; justify-content: space-between; gap: 12px; margin: 24px 0; } .nextprev a { color: var(--gold); text-decoration: none; }
.all { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.all a { display: block; color: var(--cream); text-decoration: none; } .all img { width: 100%; height: auto; border: 2px solid var(--gold); border-radius: 4px; display: block; }
.all span { display: block; margin-top: 6px; } .all small { display: block; color: var(--teal); font: italic 14px Lora, Georgia, serif; }
