/* ---------------------------------------------------------------------------
   LoveReading editorial landing pages
   ---------------------------------------------------------------------------
   Served from /content/templates/lovereading22/css/lr-landing.css and pulled in
   by each landing page with a versioned link.

   BUMP THE ?v= ON ALL PAGES WHEN YOU CHANGE THIS FILE. The site's .htaccess sets
   Cache-Control max-age=2592000 on .css - thirty days - so re-uploading alone
   changes nothing for anyone who has already loaded a page.

   Everything is scoped under .lr-page. It cannot reach the header, footer,
   navigation, book pages or anything else on the site.

   Uses the site's own tokens and typefaces: --clr-primary-900 (#e62830) is the
   LoveReading red, Playfair Display and Montserrat are already in the head.
--------------------------------------------------------------------------- */

.lr-page {
  --lr-red:   var(--clr-primary-900, #e62830);
  --lr-blue:  var(--clr-secondary-900, #0A52A1);
  --lr-ink:   #17171a;
  --lr-soft:  #55555c;
  --lr-faint: #8b8b93;
  --lr-rule:  #e6e6e9;
  --lr-tint:  #fafafb;
  --lr-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --lr-sans:  Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--lr-sans);
  color: var(--lr-ink);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-align: left;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 0 4rem;
  text-rendering: optimizeLegibility;
}

.lr-page p { margin: 0 0 1.25rem; max-width: 38em; }
.lr-page strong { font-weight: 700; color: var(--lr-ink); }
.lr-page em { font-style: italic; }
.lr-page a { color: var(--lr-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.lr-page a:hover { color: var(--lr-red); }
.lr-page a:focus-visible { outline: 2px solid var(--lr-red); outline-offset: 3px; border-radius: 2px; }

/* --- lead paragraph ----------------------------------------------------- */
/* The first paragraph carries the page. Give it the size to do that. */

.lr-page > p:first-of-type,
.lr-page .lr-byline + p {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--lr-ink);
  margin-bottom: 1.75rem;
}

/* --- byline ------------------------------------------------------------- */

.lr-page .lr-byline {
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lr-faint);
  padding: 0 0 1rem;
  margin: 0 0 2rem;
  border-bottom: 1px solid var(--lr-rule);
  max-width: none;
}
.lr-page .lr-byline strong { color: var(--lr-ink); font-weight: 700; letter-spacing: .04em; }
.lr-page .lr-byline a { color: var(--lr-red); text-decoration: none; font-weight: 700; }
.lr-page .lr-byline a:hover { text-decoration: underline; }

/* --- headings ----------------------------------------------------------- */

.lr-page h2 {
  font-family: var(--lr-serif);
  font-weight: 700;
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--lr-ink);
  margin: 3.5rem 0 1.25rem;
  text-wrap: balance;
  max-width: 22em;
}
.lr-page h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  background: var(--lr-red);
  margin-top: .85rem;
}
.lr-page h2:first-of-type { margin-top: 2.5rem; }

.lr-page h3 {
  font-family: var(--lr-sans);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--lr-ink);
  margin: 2rem 0 .5rem;
  text-wrap: balance;
}

/* --- card grid ---------------------------------------------------------- */
/* Built from paragraphs that were carrying several bolded run-in terms. Five
   definitions welded into one 759-character block is a wall on a phone; five
   cards is a thing you can scan. */

.lr-page .lr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 2.25rem;
}
.lr-page .lr-card {
  background: var(--lr-tint);
  border: 1px solid var(--lr-rule);
  border-radius: 4px;
  padding: 1.15rem 1.25rem;
  transition: border-color .15s ease, transform .15s ease;
}
.lr-page .lr-card:hover { border-color: var(--lr-red); transform: translateY(-2px); }
.lr-page .lr-card p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--lr-soft); max-width: none; }
.lr-page .lr-card p strong {
  display: block;
  font-family: var(--lr-serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--lr-ink);
  margin-bottom: .3rem;
  letter-spacing: -.005em;
}

/* --- the book list ------------------------------------------------------ */

.lr-page ol.lr-booklist {
  list-style: none;
  counter-reset: lrbook;
  margin: 2rem 0 2.5rem;
  padding: 0;
  max-width: none;
}
/* Each item is: number (absolutely placed), cover, then the text. Flex, not
   grid, and for a reason worth keeping: "by Author" is a bare text node in the
   markup. Inside a grid a bare text node becomes an anonymous grid item that no
   selector can address, and it auto-placed itself on top of the number. That
   shipped once and was only visible in a browser at 375px. */
.lr-page ol.lr-booklist > li {
  counter-increment: lrbook;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 0 1.35rem 2.9rem;
  border-bottom: 1px solid var(--lr-rule);
}
.lr-page ol.lr-booklist > li:first-child { border-top: 1px solid var(--lr-rule); }

.lr-page ol.lr-booklist > li::before {
  content: counter(lrbook);
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 2.1rem;
  font-family: var(--lr-serif);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lr-red);
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

/* --- the cover ---------------------------------------------------------- */
/* aspect-ratio plus object-fit means a cover of any proportion sits correctly
   in the same box, and the space is reserved before the image loads, so the
   text underneath never jumps. Measured covers run 124-420px wide at a
   consistent 0.62-0.67 ratio. */

.lr-page .lr-cov {
  flex: 0 0 4.75rem;
  display: block;
  line-height: 0;
}
.lr-page .lr-cov img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: top center;
  border-radius: 2px;
  background: var(--lr-tint);
  box-shadow: 0 1px 4px rgba(0,0,0,.16);
}

/* 15 of the books in these guides have no cover file anywhere on the site -
   their own book pages render a broken image. A tile carrying the title reads
   as a decision; a broken image reads as a fault. */
.lr-page .lr-cov-none {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  padding: .4rem;
  border: 1px solid var(--lr-rule);
  border-radius: 2px;
  background: var(--lr-tint);
}
.lr-page .lr-cov-none > span {
  font-family: var(--lr-serif);
  font-size: .68rem;
  line-height: 1.25;
  text-align: center;
  color: var(--lr-faint);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

/* The title tile links to the book page too, so it must not pick up the
   site-wide link underline and blue that .lr-page a applies. */
.lr-page a.lr-cov { text-decoration: none; color: inherit; }
.lr-page a.lr-cov-none:hover { border-color: var(--lr-red); }

.lr-page .lr-bk { flex: 1 1 auto; min-width: 0; }

.lr-page ol.lr-booklist > li .lr-bk > a {
  font-family: var(--lr-serif);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--lr-ink);
  text-decoration: none;
  line-height: 1.3;
}
.lr-page ol.lr-booklist > li .lr-bk > a:hover {
  color: var(--lr-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lr-page .lr-note {
  display: block;
  margin-top: .45rem;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--lr-soft);
  max-width: 34em;
}

/* --- authority ---------------------------------------------------------- */
/* The panel is what separates this from a list anyone could write, so it does
   not get to look like body copy. */

.lr-page .lr-authority {
  border-top: 3px solid var(--lr-ink);
  border-bottom: 1px solid var(--lr-rule);
  padding: 1.75rem 0 1.5rem;
  margin: 1.5rem 0 2.5rem;
}
.lr-page .lr-authority p { font-size: 1rem; line-height: 1.68; color: var(--lr-soft); }
.lr-page .lr-authority p:first-child {
  font-family: var(--lr-serif);
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--lr-ink);
}
.lr-page .lr-authority p:last-child { margin-bottom: 0; }
.lr-page .lr-authority strong { color: var(--lr-ink); }


/* --- more guides -------------------------------------------------------- */

.lr-page .lr-pair { font-size: 1rem; color: var(--lr-soft); }
.lr-page ul.lr-more {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.5rem;
  max-width: none;
}
.lr-page ul.lr-more li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--lr-rule);
}
.lr-page ul.lr-more a {
  font-family: var(--lr-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lr-ink);
  text-decoration: none;
  display: inline-block;
  padding: .25rem 0;
}
.lr-page ul.lr-more a:hover { color: var(--lr-red); text-decoration: underline; text-underline-offset: 3px; }

/* --- cover collage ------------------------------------------------------ */
/* A fan of covers under the page title. Each cover's tilt, drop, size and
   stacking come from inline custom properties set by build_guides.py, so the
   layout is designed once in the builder rather than with nth-child guesses.
   overflow-x: clip, not hidden: it stops the fan ever widening the page while
   still letting a lifted cover rise above the panel. */

.lr-page .lr-collage {
  margin: .25rem 0 1.75rem;
  padding: 1.7rem 0 1rem;
  background: radial-gradient(ellipse 62% 72% at 50% 58%, #ededf1 0%, rgba(237,237,241,0) 74%);
  text-align: center;
  overflow-x: clip;
}
.lr-page .lr-collage-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.lr-page a.lr-cl {
  position: relative;
  z-index: var(--z);
  /* Scales with the screen between phone and desktop. A fixed 5.6rem clipped
     the two outer covers by 2px at a 660px tablet width - measured, not guessed. */
  flex: 0 0 clamp(4.4rem, 11vw, 5.6rem);
  margin: 0 -.75rem;
  line-height: 0;
  transform: translateY(var(--y)) rotate(var(--r)) scale(var(--s));
  transform-origin: 50% 100%;
  transition: transform .2s ease;
}
.lr-page a.lr-cl img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 2px;
  background: var(--lr-tint);
  box-shadow: 0 6px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.12);
}
.lr-page a.lr-cl:hover {
  z-index: 40;
  transform: translateY(calc(var(--y) - .6rem)) rotate(0deg) scale(calc(var(--s) + .05));
}
.lr-page .lr-collage-cap {
  margin: 1.15rem auto 0;
  max-width: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lr-faint);
}

/* Outside the guides - on blog posts - the collage sits in its own .lr-page
   wrapper so it can reuse every rule above. The host cancels .lr-page's own
   column width and bottom padding so it only takes the space the fan needs. */
.lr-page.lr-collage-host {
  max-width: none;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 1rem;
  line-height: normal;
}
.lr-page .lr-collage-cap a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.lr-page .lr-collage-cap a:hover { color: var(--lr-red); }

/* Landing from the collage: leave room under any fixed header, and flash the
   entry briefly so the reader can see where they have arrived. */
.lr-page ol.lr-booklist > li { scroll-margin-top: 7rem; }
.lr-page ol.lr-booklist > li:target { animation: lr-flash 2.2s ease-out; }
@keyframes lr-flash {
  0%, 30% { background: #fdecec; }
  100%    { background: transparent; }
}

@media (max-width: 40rem) {
  .lr-page .lr-collage { padding: 1.25rem 0 .8rem; margin-bottom: 1.4rem; }
  /* Sized to the LIVE text column, not the preview's. At 5rem the five-cover
     fan spanned 331px against a 311px column on the real page at 375px, and
     the outer covers were cut off - the preview had a wider column and hid it. */
  .lr-page a.lr-cl { flex-basis: min(4.4rem, 19vw); margin: 0 -.6rem; }
  .lr-page a.lr-cl.lr-cl-far { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lr-page a.lr-cl { transition: none; }
  .lr-page ol.lr-booklist > li:target { animation: none; background: #fdecec; }
}

/* --- reading guides hub ------------------------------------------------ */
/* /reading-guides, the page the site-wide menu link points at. Each card is a
   single link - covers, title, blurb - so the whole card is the tap target. */

.lr-page .lr-guides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}
.lr-page a.lr-guide {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--lr-rule);
  border-radius: 4px;
  background: #fff;
  color: var(--lr-ink);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.lr-page a.lr-guide:hover { border-color: var(--lr-red); transform: translateY(-2px); }
.lr-page .lr-guide-covers { display: flex; gap: .4rem; margin-bottom: .2rem; }
.lr-page .lr-guide-covers img {
  width: 3.6rem;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: bottom center;
  border-radius: 2px;
  background: var(--lr-tint);
  box-shadow: 0 1px 4px rgba(0,0,0,.16);
}
.lr-page .lr-guide-title { font-family: var(--lr-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.lr-page a.lr-guide:hover .lr-guide-title { color: var(--lr-red); }
.lr-page .lr-guide-desc { font-size: .92rem; line-height: 1.55; color: var(--lr-soft); }
.lr-page .lr-guide-count {
  margin-top: auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lr-faint);
}
@media (prefers-reduced-motion: reduce) {
  .lr-page a.lr-guide { transition: none; }
  .lr-page a.lr-guide:hover { transform: none; }
}

/* --- the named panel --------------------------------------------------- */
/* Inside "Who chose these books": the experts as cards - photo, name,
   one verified credential - each linking to their profile. The whole card is
   the link. Two columns where there is room, one on a phone. */

.lr-page .lr-authority .lr-panel-intro {
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--lr-ink);
}
.lr-page .lr-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem;
  margin: .6rem 0 1.5rem;
}
.lr-page a.lr-expert {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  column-gap: .85rem;
  align-items: start;
  padding: .85rem .9rem;
  border: 1px solid var(--lr-rule);
  border-radius: 4px;
  background: #fff;
  color: var(--lr-ink);
  text-decoration: none;
  transition: border-color .15s ease;
}
.lr-page a.lr-expert img {
  grid-row: 1 / span 2;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lr-tint);
}
.lr-page .lr-ex-name {
  font-family: var(--lr-serif);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.lr-page .lr-ex-cred { font-size: .86rem; line-height: 1.45; color: var(--lr-soft); }
.lr-page a.lr-expert:hover { border-color: var(--lr-red); }
.lr-page a.lr-expert:hover .lr-ex-name { color: var(--lr-red); }
@media (prefers-reduced-motion: reduce) { .lr-page a.lr-expert { transition: none; } }

/* --- questions ---------------------------------------------------------- */

.lr-page .lr-faq { margin-top: 1.5rem; border-top: 1px solid var(--lr-rule); }
.lr-page .lr-faq h3 {
  margin: 0;
  padding: 1.35rem 0 .4rem;
  font-size: 1.05rem;
}
.lr-page .lr-faq p {
  color: var(--lr-soft);
  font-size: 1rem;
  margin: 0;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--lr-rule);
  max-width: 40em;
}

/* --- mobile ------------------------------------------------------------- */

@media (max-width: 40rem) {
  .lr-page { font-size: 1rem; line-height: 1.68; padding-bottom: 3rem; }
  .lr-page > p:first-of-type,
  .lr-page .lr-byline + p { font-size: 1.1rem; line-height: 1.55; }
  .lr-page h2 { margin: 2.75rem 0 1rem; }
  .lr-page h2::after { width: 2.25rem; margin-top: .7rem; }
  .lr-page .lr-cards { grid-template-columns: 1fr; gap: .75rem; margin: 1.5rem 0 2rem; }
  .lr-page .lr-card { padding: 1rem 1.1rem; }

  .lr-page ol.lr-booklist > li { padding: 1.15rem 0 1.15rem 2.1rem; gap: .8rem; }
  .lr-page ol.lr-booklist > li::before { font-size: 1.25rem; width: 1.55rem; top: 1.2rem; }
  .lr-page .lr-cov { flex-basis: 3.6rem; }
  .lr-page .lr-cov-none > span { font-size: .6rem; -webkit-line-clamp: 4; }
  .lr-page ul.lr-more { grid-template-columns: 1fr; gap: 0; }
  /* Bigger tap target. A bare inline link measured 24px tall at 375px, under the
     44px Google recommends. */
  /* inline-block padding grows the hit area without moving the text, so this
     buys the 44px Google asks for and costs nothing visually. Measured 32px
     before, 44px after, on the live page at 375px. */
  .lr-page ol.lr-booklist > li .lr-bk > a { font-size: 1.05rem; display: inline-block; padding: .68rem 0; }

  .lr-page .lr-authority { padding: 1.35rem 0 1.25rem; }
  .lr-page .lr-authority p:first-child { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lr-page .lr-card { transition: none; }
  .lr-page .lr-card:hover { transform: none; }
}

/* --- 11 Sep 2026: the named panel reaches the top of the page ----------- */
/* A row of the panel's faces above the byline, linking down to the panel.
   Sits BEFORE the byline so ".lr-byline + p" still finds the lead paragraph. */

.lr-page a.lr-faces {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .9rem;
  color: var(--lr-soft);
  font-size: .85rem;
  line-height: 1.4;
  text-decoration: none;
}
.lr-page .lr-faces-imgs { display: flex; flex: none; padding-left: .5rem; }
.lr-page .lr-faces-imgs img {
  width: 2.2rem;
  height: 2.2rem;
  margin-left: -.5rem;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lr-tint);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.lr-page a.lr-faces strong { color: var(--lr-ink); }
.lr-page a.lr-faces:hover strong { color: var(--lr-red); }
.lr-page #lr-panel { scroll-margin-top: 7rem; }

/* "Reviewed by ..." under a book in the list: the expert who wrote the review
   on that book's page. Only shown where a published review exists. */
.lr-page .lr-rev {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--lr-faint);
}
.lr-page .lr-rev a { color: var(--lr-red); font-weight: 700; text-decoration: none; }
.lr-page .lr-rev a:hover { text-decoration: underline; }

/* Our own articles on the same subject, linked from the guide. */
.lr-page ul.lr-reads { list-style: none; margin: 1.25rem 0 2.25rem; padding: 0; border-top: 1px solid var(--lr-rule); }
.lr-page ul.lr-reads > li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--lr-rule);
}
.lr-page ul.lr-reads a { color: var(--lr-ink); font-weight: 700; text-decoration: none; line-height: 1.4; }
.lr-page ul.lr-reads a:hover { color: var(--lr-red); }
.lr-page ul.lr-reads span { flex: none; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lr-faint); }
@media (max-width: 40rem) {
  .lr-page ul.lr-reads > li { flex-direction: column; gap: .2rem; }
  .lr-page ul.lr-reads a { display: inline-block; padding: .35rem 0; }
}

/* The byline. Declared LAST on purpose: ".lr-page > p:first-of-type" is more
   specific than ".lr-page .lr-byline", so on a page whose first paragraph is
   the byline it was drawn at lead-paragraph size. Same specificity here, later
   in the file, so it wins at every width. */
.lr-page p.lr-byline {
  font-size: .75rem;
  line-height: 1.6;
  color: var(--lr-faint);
  margin: 0 0 2rem;
}