/* ══════════════════════════════════════════════════════════════════════════
   The shelf — the only thing the store adds to the house stylesheet.

   Everything else on this page comes from house.css, which is the apex's own
   CSS lifted whole. These rules do one job: lay out the volumes as grid cells
   over a hairline, exactly the way .contents lays out the four cells above
   them, so the shelf reads as more of the same page rather than a widget
   dropped into it.
   ══════════════════════════════════════════════════════════════════════════ */

.shelf { margin: 5.4em 0 0; }
.shelf-head { max-width: 33em; margin: 0 auto 2.4em; text-align: center; }
.shelf-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 4.6vw, 40px); line-height: 1.12;
  color: var(--ink); margin: .5em 0 0; text-wrap: balance;
}
.shelf-head .deck { font-size: 19px; margin: 1.1em auto 0; max-width: 30em; }
.shelf-head .tag { display: block; margin: 1.6em 0 0; }

/* Same geometry as .contents: gap 1px over the rule, radius zero, no fill. */
.books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19em, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.book { background: var(--paper); padding: 2.2em 1.8em; display: flex; flex-direction: column; }
.book h3 {
  font-family: var(--serif); font-weight: 400; font-size: 21px;
  line-height: 1.2; color: var(--ink); margin: 0 0 .45em;
}
.book .deck { font-size: 16px; margin: 0 0 .6em; text-align: left; }
.book .meta {
  font-family: var(--sans); font-size: 8.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin: 0; line-height: 1.9;
}
.book .state {
  display: block; font-family: var(--sans); font-size: 8.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
  opacity: .72; margin-top: .5em;
}

.narration { margin: 1.2em 0 0; padding-top: 1.1em; border-top: 1px solid var(--rule); }
.narration .kicker { font-size: 8.5px; letter-spacing: .26em; }
.narration audio { width: 100%; margin-top: .7em; }

/* The way in. Gold is never a fill, so this is a rule and a word — the same
   move the apex makes everywhere except its one .join button. */
.take {
  display: inline-block; align-self: flex-start;
  margin-top: auto; padding-top: 1.1em;
  border-top: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  font-family: var(--sans); font-size: 9px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-d); text-decoration: none;
  transition: opacity .5s var(--ease);
}
.book .take { margin-top: 1.4em; }
.take:hover { opacity: .62; }

/* The work table borrows the apex's table wholesale; only the link needs a rule. */
.movement table a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 44%, transparent);
}
.movement table a:hover { color: var(--gold-d); }

@media (max-width: 640px) {
  .books { grid-template-columns: 1fr; }
}

/* The page after the money, in the house's own centred idiom. */
.receipt { max-width: 33em; margin: 0 auto; padding: 7.5em 0 0; text-align: center; }
.receipt h1 { margin: .4em 0 0; }
.receipt .meta {
  font-family: var(--sans); font-size: 9px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--muted); margin: 1.8em 0 0;
}
.receipt .narration { margin: 2.4em 0 0; border-bottom: 1px solid var(--rule); padding-bottom: 1.4em; }
.ways-out { display: flex; gap: 2.2em; justify-content: center; flex-wrap: wrap; margin-top: 2.4em; }
.receipt .take.ghost { color: var(--muted); border-top-color: var(--rule); }
.receipt .keep {
  font-style: italic; font-size: 15px; line-height: 1.6; color: var(--muted);
  max-width: 26em; margin: 3.2em auto 0; padding-top: 1.8em;
  border-top: 1px solid var(--rule);
}
.receipt .keep strong { font-style: normal; color: var(--ink); font-weight: 600; }

/* The reading itself. One column at the body measure, and nothing in the
   margin — the page is the book, not a frame around it. */
.reading { max-width: 33em; margin: 3.6em auto 0; }
.reading h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(26px, 4vw, 36px); line-height: 1.14;
  color: var(--ink); margin: 2.2em 0 .7em; text-wrap: balance;
}
.reading h3 { font-family: var(--serif); font-weight: 400; font-size: 23px;
  color: var(--ink); margin: 1.8em 0 .5em; line-height: 1.2; }
.reading h4 { font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold-d); margin: 2em 0 .8em; }
.reading p { margin: 0 0 1.15em; }
.reading p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 300; font-size: 82px; line-height: .72;
  float: left; padding: .06em .1em 0 0; color: var(--gold-d);
}
.reading ul, .reading ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.reading li { margin: 0 0 .45em; }
.reading strong { color: var(--ink); font-weight: 600; }
.reading em { color: var(--gold-d); }
.reading + .offer { margin-top: 4.4em; }

/* The sample says what it is, quietly, so nobody feels tricked by the ending. */
.narration .sample-note {
  display: block; margin-top: .7em;
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  line-height: 1.5; color: var(--muted);
}

/* Provenance. Set as an aside on the desk rather than on paper — it is a note
   about the text, not part of it, and it travels with any copy that is taken. */
.provenance {
  max-width: 33em; margin: 4.4em auto 0; padding: 2em 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.provenance p { margin: .9em 0 0; font-size: 15px; line-height: 1.62; }
.provenance p:first-of-type { margin-top: 1.2em; }
.provenance strong { color: var(--ink); font-weight: 600; }
.provenance a {
  color: var(--gold-d); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}

/* THE OPENING SEASON — the notice that the library is open and not finished.
   An aside on the desk, in the same idiom as .provenance: two hairlines and the
   muted voice. Deliberately not a banner — no fill, no badge, nothing red. The
   house does not raise its voice at its own reader, and a beta notice set as an
   alert reads as an apology for the work rather than a fact about it. */
.opening {
  max-width: 33em; margin: 3.4em auto 0; padding: 1.8em 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.opening .kicker { text-align: center; }
.opening p { margin: 1.1em 0 0; font-size: 16px; line-height: 1.66; color: var(--muted); }
.opening p + p { margin-top: .9em; }

/* The method statement, on the shelf and on its own page. The link is a rule
   and a word, never a fill — gold is a mark. */
#how-these-were-made p:last-child { margin-top: 1.8em; }
#how-these-were-made .take { margin-top: 0; }
.movement a {
  color: var(--gold-d); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.movement a.take { border-bottom: 0; }
footer a[href="/method"] { color: var(--muted); }

/* THE OPEN HOUSE — the band when nothing is being charged. Not the offer band
   with the figure quietly deleted: that reads as a price list with a hole in
   it. A different band, saying the true thing, which is that the reading is
   what is on offer today. */
.offer.open-house { padding: 2.6em 1em; }
.offer.open-house .per { margin: 0; }
.offer.open-house .quiet {
  font-size: 21px; line-height: 1.4; max-width: 20em; margin: .6em auto 0;
}
.offer.open-house .after { margin-top: 1.8em; }