/* The Shelf (/tolkien-books/): Tolkien's books in publication order.
   Labels in the tracked-caps register, reading text in the display face,
   per content.css. The year column is the page's ruler. */

.shelfHead .pageLede{ max-width:62ch; }
.shelfHead .watchCard{ max-width:520px; }

.shelfControls{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:12px 32px; margin-top:clamp(22px,3.2vh,34px);
  padding-top:14px; border-top:1px solid rgba(201,168,117,.13);
}
.storeSwitch, .shelfFilter{
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.2em;
  color:rgba(201,168,117,.9);
}
.storeBtns{ display:inline-flex; gap:4px; margin-left:10px; }
.storeBtns button{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  background:none; border:1px solid transparent; border-radius:2px;
  padding:5px 9px; color:rgba(232,200,154,.55); cursor:pointer;
}
.storeBtns button:hover{ color:#fff5e2; }
.storeBtns button[aria-pressed="true"]{ color:var(--warm-gold); border-color:rgba(201,168,117,.45); }
.shelfFilter{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.shelfFilter input{ accent-color:var(--gold); }
.shelfDisclosure{
  flex-basis:100%;
  font-family:var(--font-display); font-size:15px; line-height:1.5;
  color:rgba(232,228,221,.55);
}

.shelfEraNote{
  max-width:62ch; margin-bottom:clamp(18px,2.6vh,28px);
  font-family:var(--font-display); font-size:18px; line-height:1.55;
  color:rgba(232,228,221,.7);
}

.shelfList{ list-style:none; margin:0; padding:0; }
.shelfRow{
  display:grid; grid-template-columns:5.2em 1fr auto; align-items:baseline;
  gap:6px clamp(16px,2.6vw,36px);
  padding:clamp(14px,2vh,20px) 0;
  border-top:1px solid rgba(201,168,117,.1);
}
.shelfYear{
  font-family:var(--font-display); font-size:clamp(20px,1.7vw,26px);
  color:rgba(201,168,117,.85); font-variant-numeric:oldstyle-nums;
}
.shelfYear small{
  display:block; font-size:13px; letter-spacing:.04em; color:rgba(201,168,117,.6);
}
.shelfTitle{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(19px,1.6vw,24px); line-height:1.22; color:var(--warm-gold);
}
.shelfBy{
  margin-top:4px;
  font-family:var(--font-serif); font-size:10px;
  text-transform:uppercase; letter-spacing:.18em; color:rgba(201,168,117,.7);
}
.shelfGloss{
  margin-top:8px; max-width:60ch;
  font-family:var(--font-display); font-size:18.5px; line-height:1.5;
  color:rgba(232,228,221,.8);
}
.buyLink{
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.2em; white-space:nowrap;
  color:var(--warm-gold); text-decoration:none;
  padding:8px 0;
}
.buyLink em{ font-style:normal; display:inline-block; transition:transform .35s ease; }
.buyLink:hover{ color:#fff5e2; }
.buyLink:hover em{ transform:translateX(3px); }
.buyLink:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; }

/* The History volumes, nested under their one entry. */
.shelfVols{ margin-top:12px; }
.shelfVols summary{
  cursor:pointer; width:max-content;
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.2em; color:var(--warm-gold);
}
.shelfVols summary:hover{ color:#fff5e2; }
.shelfVols .shelfList{ margin-top:10px; }
.shelfVol{ grid-template-columns:3.4em 1fr auto; padding:10px 0; }
.shelfVol .shelfYear{ font-size:17px; }
.shelfVol .shelfTitle{ font-size:18px; }
.shelfVol .shelfGloss{ font-size:16.5px; margin-top:4px; }

/* Middle-earth only. */
body.meOnly .shelfRow[data-tier="other"]{ display:none; }

/* If you're starting out. */
.startList{ list-style:none; margin:0; padding:0; counter-reset:step; max-width:70ch; }
.startList li{
  counter-increment:step; position:relative;
  padding:10px 0 10px 2.4em; border-top:1px solid rgba(201,168,117,.1);
  font-family:var(--font-display); font-size:18.5px; line-height:1.5;
  color:rgba(232,228,221,.78);
}
.startList li::before{
  content:counter(step); position:absolute; left:0; top:10px;
  font-size:20px; color:rgba(201,168,117,.8);
}
.startLink{ color:var(--warm-gold); text-decoration:none; border-bottom:1px solid rgba(201,168,117,.35); margin-right:.5em; }
.startLink:hover{ color:#fff5e2; border-bottom-color:var(--warm-gold); }

@media (max-width:640px){
  .shelfRow{ grid-template-columns:3.6em 1fr; }
  .shelfRow > .buyLink{ grid-column:2; justify-self:start; padding-top:0; }
  .shelfVol{ grid-template-columns:3em 1fr; }
}
.shelfVols summary::marker{ content:''; }
.shelfVols summary::before{ content:'+ '; }
.shelfVols[open] summary::before{ content:'– '; }