/* GREAT BOOKS (v92) — shelf + per-book page, the Self Mastery Book Reviews layout
   in Classical Mind's own shell (topic.css supplies hero, cards, tiles and sheets). */
.gb-main{ max-width:760px; margin:0 auto; padding:4em 1.2em calc(48px + env(safe-area-inset-bottom)); }
.gb-count{ margin:.9em 2px .2em; }

/* ---- the shelf ---- */
.gb-shelf{ margin:1.5em 0 1.8em; }
.gb-shelf .tp-h h2{ color:var(--tad); }
.gb-shelf-l{ margin:-.35em 2px .85em; color:var(--tp-mute); font-size:.92rem; line-height:1.4; }
.gb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
.gb-card{ position:relative; display:flex; flex-direction:column; border-radius:20px; overflow:hidden; background:var(--tp-card); color:var(--tp-ink); text-decoration:none;
  box-shadow:0 2px 6px rgba(20,35,60,.08), 0 10px 24px color-mix(in srgb,var(--ta) 22%,transparent); transition:transform .25s var(--tp-spring); }
.gb-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2.5px; z-index:3; pointer-events:none; background:linear-gradient(135deg,var(--ta),var(--tad));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.gb-card:active{ transform:scale(.97); }
.gb-card.is-read::before{ background:linear-gradient(135deg,var(--tp-gold1),#D99A0B); }
.gb-pic{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(150deg,var(--ta),var(--tad)); }
.gb-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gb-body{ display:flex; flex-direction:column; gap:.2em; padding:.7em .85em .85em; }
.gb-name{ font-weight:800; font-size:1rem; line-height:1.18; letter-spacing:-.015em; }
.gb-tag{ font-size:.82rem; color:var(--tp-mute); line-height:1.3; }
.gb-prog{ display:inline-flex; align-items:center; gap:.25em; margin-top:.2em; font:800 .74rem/1 -apple-system,system-ui,sans-serif; color:#9A6A00; }
@media (min-width:700px){ .gb-grid{ grid-template-columns:1fr 1fr 1fr; } }

/* Real covers stand in front of the painting, like a book on a table. */
.gb-pic img.gb-cov, .td-pic img.gb-cov, .gb-spic img.gb-cov{ inset:auto; left:50%; top:52%; width:auto; height:78%; max-width:72%; object-fit:contain;
  transform:translate(-50%,-50%) rotate(-2deg); z-index:2; border-radius:2px 5px 5px 2px; box-shadow:0 12px 26px rgba(0,0,0,.38), 0 2px 5px rgba(0,0,0,.25); }
.gb-pic.has-cov > img:first-child, .td-pic.has-cov > img:first-child{ filter:saturate(.9) brightness(.9); }
.gb-spic{ position:relative; display:block; }
/* v97: the "Read this one next" card shows the cover in front of the painting too. */
.fr-pic.has-cov{ position:relative; }
.fr-pic.has-cov > img:first-child{ filter:saturate(.9) brightness(.9); }
.fr-pic img.gb-cov{ position:absolute; left:50%; top:52%; width:auto; height:80%; max-width:60%; object-fit:contain;
  transform:translate(-50%,-50%) rotate(-2deg); z-index:2; border-radius:2px 5px 5px 2px; box-shadow:0 12px 26px rgba(0,0,0,.38), 0 2px 5px rgba(0,0,0,.25); }
.gb-spic img.gb-cov{ position:absolute; height:84%; }

/* ---- one book ---- */
.gb-hero.tp-hero{ min-height:200px; max-height:none; }
.gb-hero.has-cov .tp-hero-in{ padding-right:128px; }
.tp-hero img.gb-cov{ position:absolute; inset:auto; right:16px; bottom:14px; z-index:3; width:auto; height:140px; max-width:112px; object-fit:contain; transform:rotate(2deg);
  border-radius:2px 5px 5px 2px; box-shadow:0 12px 26px rgba(0,0,0,.45); }
.gb-hero h1{ font-size:1.75rem; line-height:1.05; }

.gb-open{ position:relative; margin:18px 0; padding:1.1em 1.15em 1.15em; border-radius:22px; background:var(--tp-card); color:var(--tp-ink);
  box-shadow:0 2px 6px rgba(60,45,20,.08), 0 12px 28px color-mix(in srgb,var(--ta) 20%,transparent); }
.gb-open::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg,var(--ta),var(--tad)); pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.gb-k{ display:inline-block; font:800 .72rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tad); }
.gb-open h2{ margin:.35em 0 .45em; font-size:1.3rem; line-height:1.22; letter-spacing:-.02em; }
.gb-p{ font-family:Georgia,'Times New Roman',serif; font-size:1.06rem; line-height:1.6; color:var(--tp-ink); margin:0 0 .85em; }
.gb-p-hook{ font-weight:700; }
.gb-btns{ display:flex; flex-wrap:wrap; align-items:center; gap:.55em; margin-top:.3em; }
.gb-read{ border:0; cursor:pointer; padding:.78em 1.2em; border-radius:999px; font:800 .95rem/1 -apple-system,system-ui,sans-serif; color:#fff;
  background:linear-gradient(135deg,var(--ta),var(--tad)); box-shadow:0 6px 16px color-mix(in srgb,var(--ta) 35%,transparent); }
.gb-read::before{ display:none; }
.gb-read:active{ transform:scale(.95); }
.gb-readbtn svg{ margin-right:.3em; }
.gb-by{ margin:-.3em 0 .6em; font-weight:700; color:var(--tp-mute); }
.gb-mute{ color:var(--tp-mute); }
.gb-sec{ margin:1em 0; }
.gb-sec-h{ font:800 .7rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tad); margin-bottom:.45em; }
.gb-bul{ margin:.2em 0 0; padding-left:1.2em; }
.gb-bul li{ margin:0 0 .45em; line-height:1.45; font-family:Georgia,'Times New Roman',serif; font-size:1.02rem; }

/* key ideas have no sub-line here, so give the title room */
.gb-book .tp-idea-t{ margin:.8em .95em 1em; font-size:1rem; line-height:1.3; }

/* From the book */
.gb-quote{ position:relative; padding:1.1em 1.15em 1em; border-radius:20px; background:color-mix(in srgb,var(--tas) 75%,var(--tp-card)); color:var(--tp-ink); }
.gb-quote::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; background:linear-gradient(135deg,var(--ta),var(--tad)); opacity:.6;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.gb-quote q{ display:block; font-family:Georgia,'Times New Roman',serif; font-size:1.12rem; line-height:1.45; font-style:italic; white-space:pre-line; quotes:"\201C" "\201D"; }
.gb-quote small{ display:block; margin-top:.8em; font:800 .74rem/1.35 -apple-system,system-ui,sans-serif; letter-spacing:.03em; color:var(--tad); }
.tp-sheet .gb-quote{ margin:1.2em 0; }

a.tp-tile{ text-decoration:none; color:inherit; }

/* Next book */
.gb-nextc{ position:relative; display:grid; grid-template-columns:76px 1fr auto; gap:.9em; align-items:center; margin:1.4em 0 0; padding:.55em; border-radius:20px;
  background:var(--tp-card); text-decoration:none; color:var(--tp-ink); box-shadow:0 2px 6px rgba(20,35,60,.08),0 10px 24px color-mix(in srgb,var(--nc) 20%,transparent); transition:transform .25s var(--tp-spring); }
.gb-nextc::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; background:linear-gradient(135deg,var(--nc),var(--ncd));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.gb-nextc:active{ transform:scale(.98); }
.gb-nextc-pic{ display:block; width:76px; height:96px; border-radius:12px; overflow:hidden; background:color-mix(in srgb,var(--nc) 12%,var(--tp-card)); }
.gb-nextc-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.gb-nextc-pic img.gb-nextc-cov{ object-fit:contain; padding:6px; box-sizing:border-box; }
.gb-nextc small{ display:block; font:800 .66rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ncd); }
.gb-nextc b{ display:block; margin-top:.3em; font-size:1.12rem; letter-spacing:-.015em; line-height:1.2; }
.gb-nextc span span{ display:block; margin-top:.2em; font-size:.84rem; color:var(--tp-mute); line-height:1.35; }
.gb-nextc .go{ font-size:1.3rem; font-weight:800; color:var(--ncd); padding-right:.4em; }
.gb-book .tp-tile-l{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }