/* v90: covers, the group headings, the Who-are-you row and the cards on /discipleship/, the Prophecy page and a book's contents page. Loaded after site.css, on those pages only. */
.cover{display:block;width:100%;height:auto;aspect-ratio:3/4;background:#374151;border-radius:3px}

/* the library's Read now grid: two cards across on a phone, three on a tablet, four on a wide screen */
.cards.lib{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cards.lib>.grp{grid-column:1/-1;margin:14px 0 0}
.cards.lib>.grp:first-child{margin-top:0}
.cards.lib>.qcard{grid-column:1/-1}
.cards.lib>a.card:first-child{grid-column:1/-1}
.lib .grp h2{margin:0;font:700 clamp(21px,2.6vw,26px)/1.2 var(--serif)}
.lib .grp p{margin:2px 0 0;color:var(--muted);font:400 16px/1.4 var(--sans)}
.lib .card{padding:0;gap:0;overflow:hidden}
.lib .card .cover{border-radius:0;border-bottom:1px solid var(--rule)}
.lib .card-b{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;padding:12px 12px 14px}
.lib .card h2{margin:0;font:700 17px/1.25 var(--serif);overflow-wrap:anywhere}
.lib .card .desc{margin:0;font:400 14.5px/1.4 var(--sans);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.lib .card .meta{margin:0;font:600 13.5px/1.3 var(--sans);color:var(--ink)}
.lib .card .go{padding-top:4px;font-size:15px}
.lib .card:hover,.lib .card:focus-visible{border-color:var(--accent)}
.lib .card .cont{align-self:flex-start;margin:0 0 2px;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--surface);font:700 12px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.cards.lib>a.card:first-child{flex-direction:row}
.cards.lib>a.card:first-child .cover{width:34%;max-width:150px;flex:none;align-self:flex-start;border-bottom:0;border-right:1px solid var(--rule)}
.cards.lib>a.card:first-child .desc{-webkit-line-clamp:6}
.lib .qcard{padding:clamp(18px,2.6vw,28px);gap:8px}
@media (min-width:620px){
 .cards.lib{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .lib .card{flex-direction:row}
 .lib .card .cover{width:112px;flex:none;align-self:flex-start;border-bottom:0;border-right:1px solid var(--rule)}
 .lib .qcard{flex-direction:column}
 .cards.lib>a.card:first-child .cover{width:150px}
}
@media (min-width:1000px){.cards.lib{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* the Prophecy page: one book to a row, cover on the left */
.cards.pro{grid-template-columns:minmax(0,1fr)}
.cards.pro .card{flex-direction:row;gap:clamp(14px,2.4vw,24px);align-items:flex-start}
.cards.pro .cover{flex:none;width:clamp(88px,18vw,150px)}
.cards.pro .card-b{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.card .meta{margin:0;font:600 14px/1.3 var(--sans)}

/* a book's contents page: the cover sits at the left of the first panel */
.vol-head .cover{float:left;width:clamp(96px,22vw,150px);margin:0 clamp(14px,2.4vw,24px) 12px 0;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.vol-head::after{content:"";display:block;clear:both}
.vol-head .meta{margin:0 0 10px;font:600 15px/1.3 var(--sans);color:var(--muted)}

/* Who are you? A row of nine chips; each opens one paragraph below the row. Without the script the paragraphs are all shown and the chips are links to them. */
.who{display:flex;flex-direction:column;gap:12px}
.who .section-head{margin:0}
.who-chips{display:flex;flex-wrap:wrap;gap:8px}
.who-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;background:color-mix(in srgb,var(--surface) 93%,transparent);color:var(--ink);font:600 15px/1.2 var(--sans);text-decoration:none;white-space:nowrap}
.who-chips a:hover{border-color:var(--accent)}
.who-chips a[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent)}
@media (max-width:699px){.who-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}.who-chips::-webkit-scrollbar{display:none}.who-chips a{flex:0 0 auto}}
.who-panels{display:flex;flex-direction:column;gap:12px}
.who-js .who-panels:not(:has(.open)){display:none}
.who-js .who-panel{display:none}
.who-js .who-panel.open{display:block}
.who-panel p{margin:0}
@media print{.who-chips{display:none}.who-js .who-panel{display:block}}