@import "bookstyle.css";
@import "reader.css";

:root {
  --room: #161c19;
  --paper: #f1dfb6;
  --wood: #715039;
  --wood-shadow: #34271e;
  --focus: #ffd278;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: repeating-linear-gradient(90deg, transparent 0 79px, #ffffff02 79px 80px), var(--room);
  color: var(--paper);
  font: 1rem/1.6 system-ui, sans-serif;
}
.library {
  width: min(48rem, calc(100% - 2rem));
  margin-inline: auto;
  padding-block: clamp(2rem, 6vw, 4rem);
}
.library__header { text-align: center; margin-bottom: 2rem; }
.library__eyebrow {
  color: #c8ad7b;
  font: .75rem/1.5 ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1 {
  font: bold clamp(2rem, 6vw, 3rem)/1.15 Georgia, serif;
  margin: .65rem 0 1rem;
  text-wrap: balance;
}
.library__header > p:last-child { color: #c7baa0; }
/* The frame and the planks share a palette, so they read as one object. */
.bookcase {
  border: 12px solid var(--wood-shadow);
  border-top: 16px solid #8a6241;
  background: repeating-linear-gradient(90deg, #29231c 0 47px, #342a20 47px 50px, #201d18 50px 53px);
  box-shadow: 0 -4px 0 #b58958, 6px 8px 0 #0b100d, inset 5px 0 0 #171713, inset -5px 0 0 #171713;
}
.shelf { position: relative; padding-top: 1.25rem; }
.shelf h2 {
  margin: 0 1.5rem;
  color: #d7bb8d;
  font: .75rem/1.5 ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shelf__items {
  display: flex;
  align-items: flex-end;
  gap: clamp(.75rem, 3vw, 1.5rem);
  min-height: 15rem;
  padding: 2rem clamp(1rem, 4vw, 2.5rem) 0;
}
.shelf__plank {
  height: 1.5rem;
  background: repeating-linear-gradient(0deg, transparent 0 6px, #33211740 6px 8px), var(--wood);
  border-top: 4px solid #a17a4e;
  border-bottom: 8px solid var(--wood-shadow);
  box-shadow: 0 6px 0 #0004;
}
.library__hint { margin-top: 1.5rem; color: #c7baa0; font-size: .8rem; text-align: center; }
/* A decorative CSS candle: three rectangular pieces, no image asset yet. */
.candle { position: relative; width: 4rem; height: 7rem; margin-left: auto; flex: 0 0 4rem; }
.candle__wax { position: absolute; bottom: .5rem; left: 1.25rem; width: 1.5rem; height: 4rem; background: #ddc591; border-left: 4px solid #f7e5b6; border-right: 4px solid #b89763; }
.candle__wax::after { content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 1rem; background: #f7e5b6; }
.candle__flame { position: absolute; left: 1.75rem; bottom: 4.5rem; width: .5rem; height: 1rem; background: #fff1af; box-shadow: -4px 4px 0 #d79742, 4px 4px 0 #d79742, 0 -4px 0 #efbe68; }
.candle__holder { position: absolute; bottom: 0; width: 4rem; height: .5rem; background: #b18a4e; box-shadow: inset 0 -3px 0 #6c5031; }
.entry {
  margin-block: 2rem;
  padding: 1.5rem;
  background: var(--paper);
  color: #292018;
  scroll-margin-top: 1rem;
}
.entry h2 { margin-top: 0; }
/* Keep entries direct children of .library for the reader's progressive enhancement. */
.js-reader .library > .entry { display: none; }
body.reader-open { overflow: hidden; }
@media (max-width: 30rem) {
  .library { width: calc(100% - 1.5rem); }
  .bookcase { border-inline-width: 8px; }
  .shelf h2 { margin-inline: 1rem; font-size: .65rem; letter-spacing: .03em; }
  .shelf__items { gap: .75rem; padding-inline: .75rem; }
  .candle { flex-basis: 2.5rem; width: 2.5rem; }
  .candle__wax { left: .5rem; }
  .candle__flame { left: 1rem; }
  .candle__holder { width: 2.5rem; }
}