/* =====================================================================
   VESPERS — Books (library index + single book)
   Inherits tokens from main.css (:root). Mobile-first.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Book cover component (shared) — CSS/SVG cover, or a generated image.
   Container queries let the title scale with the cover at any size.
   --------------------------------------------------------------------- */
.bookcover{position:relative; display:block; width:100%; aspect-ratio:3/4; border-radius:5px 12px 12px 5px; overflow:hidden;
  container-type:inline-size; isolation:isolate;
  box-shadow:0 20px 46px -20px rgba(20,22,46,.55), 0 2px 8px rgba(20,22,46,.16);}
.bookcover--img img{width:100%; height:100%; object-fit:cover; display:block;}
.bookcover-spine{position:absolute; inset:0 auto 0 0; width:9px; z-index:3;
  background:linear-gradient(90deg, rgba(0,0,0,.30), rgba(255,255,255,.05) 58%, transparent);}
.bookcover-face{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:13% 11%;}
.bookcover-arch{position:absolute; left:50%; top:8%; transform:translateX(-50%); width:66%; height:80%;
  border:1.5px solid var(--hairline-gold); border-bottom:0; border-radius:50% 50% 0 0 / 42% 42% 0 0; opacity:.55; pointer-events:none;}
.bookcover-eyebrow{position:relative; z-index:2; font:700 3.1cqw/1 var(--font-body); letter-spacing:.24em; text-transform:uppercase; opacity:.82;}
.bookcover-motif{position:relative; z-index:2; margin:9% 0 7%; opacity:.92;}
.bookcover-motif svg{width:13cqw !important; height:13cqw !important;}
.bookcover-title{position:relative; z-index:2; font:600 14cqw/1.0 var(--font-display); letter-spacing:-.01em;}
.bookcover-rule{position:relative; z-index:2; width:22%; height:1px; margin:8% 0; background:currentColor; opacity:.5;}
.bookcover-sub{position:relative; z-index:2; font:italic 500 3.7cqw/1.4 var(--font-display); opacity:.82; max-width:24ch;}
/* palettes */
.bookcover--midnight{background:radial-gradient(70% 52% at 50% 20%, rgba(226,203,148,.22), transparent 62%), linear-gradient(160deg,#262A52,#14162E 72%); color:var(--gilt-100);}
.bookcover--indigo{background:radial-gradient(70% 52% at 50% 18%, rgba(226,203,148,.20), transparent 62%), linear-gradient(160deg,#3a3f73,#1B1E3D 74%); color:var(--gilt-100);}
.bookcover--sage{background:radial-gradient(70% 52% at 50% 20%, rgba(226,203,148,.16), transparent 62%), linear-gradient(160deg,#5F7257,#2c352a 78%); color:#EBEEE3;}
.bookcover--gilt{background:radial-gradient(82% 58% at 50% 16%, rgba(255,255,255,.55), transparent 60%), linear-gradient(160deg,#F3E8CC,#E2CB94 66%,#C6A45C); color:var(--ink-900);}
.bookcover--gilt .bookcover-arch{border-color:rgba(138,106,34,.42);}
.bookcover--gilt .bookcover-motif{color:var(--gilt-800);}
.bookcover--gilt .bookcover-eyebrow{color:var(--gilt-800); opacity:.95;}
.bookcover--midnight .bookcover-motif, .bookcover--indigo .bookcover-motif, .bookcover--sage .bookcover-motif{color:var(--gilt-300);}

/* image cover: generated art + overlaid title/author over a legibility scrim */
.bookcover--img{color:var(--parchment-50);}
/* real publisher cover — framed, never cropped (artwork carries its own title) */
.bookcover--real{background:linear-gradient(160deg,#2a2d52,#14162e);}
.bookcover.bookcover--real img{object-fit:contain;}
.bookcover-imgscrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(to top, rgba(20,22,46,.90) 0%, rgba(20,22,46,.74) 17%, rgba(20,22,46,.30) 42%, rgba(20,22,46,0) 64%),
  linear-gradient(to bottom, rgba(20,22,46,.50) 0%, rgba(20,22,46,0) 26%);}
.bookcover-face--img{justify-content:space-between; padding:8.5% 9% 10.5%;}
.bookcover-face--img .bookcover-eyebrow{color:var(--gilt-300); opacity:.95; text-shadow:0 1px 10px rgba(20,22,46,.6);}
.bookcover-imgcap{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;}
.bookcover-face--img .bookcover-title{color:var(--parchment-50); text-shadow:0 2px 20px rgba(20,22,46,.65), 0 1px 2px rgba(20,22,46,.5);}
.bookcover-face--img .bookcover-rule{width:26%; background:var(--gilt-300); opacity:.72; margin:7% 0 6%;}
.bookcover-face--img .bookcover-sub{color:var(--parchment-100); opacity:.92; text-shadow:0 1px 12px rgba(20,22,46,.7);}

/* ---------------------------------------------------------------------
   Books index — hero + featured catalogue
   --------------------------------------------------------------------- */
.bk-hero{position:relative; overflow:hidden; background:var(--ink-900); color:var(--on-dark-1);
  padding-top:clamp(104px,15vw,150px); padding-bottom:clamp(40px,6vw,76px);}
.bk-hero-bg{position:absolute; inset:0; z-index:0;}
.bk-hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.4;}
.bk-hero-scrim{position:absolute; inset:0; z-index:1; background:
  linear-gradient(100deg, rgba(20,22,46,.94) 0%, rgba(20,22,46,.78) 50%, rgba(20,22,46,.6) 100%),
  radial-gradient(60% 60% at 80% 24%, rgba(226,203,148,.18), transparent 60%);}
.bk-hero .hero-arch{bottom:-26%;}
.bk-hero-inner{position:relative; z-index:2; max-width:62ch;}
.bk-hero h1{color:var(--on-dark-1); font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.02; margin:12px 0 0; text-shadow:0 2px 40px rgba(20,22,46,.5);}
.bk-hero .eyebrow{margin-top:14px;}
.bk-hero .lead{color:var(--on-dark-2); margin-top:16px; max-width:52ch;}
.bk-hero-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; font:500 .9rem/1 var(--font-body); color:var(--on-dark-2);}
.bk-hero-meta b{font:600 1.05rem/1 var(--font-display); color:var(--gilt-300);}
.bk-hero-meta .dot{width:4px; height:4px; border-radius:50%; background:var(--border-on-dark);}

.bk-lib{background:var(--parchment-50);}
.bk-lib-head{max-width:62ch;}
.bk-lib-head .kicker{margin-top:8px;}
.bk-lib-head .lead{margin-top:12px;}
.bk-grid{display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,44px); margin-top:clamp(30px,4vw,46px);}
.bk-card{display:grid; grid-template-columns:128px 1fr; gap:clamp(18px,3vw,30px); align-items:center;}
.bk-card .bk-cover-link{display:block; transition:transform .45s var(--ease);}
.bk-card .bookcover{transition:box-shadow .45s var(--ease);}
.bk-card-body{min-width:0;}
.bk-card .bk-theme{font:700 .64rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--eyebrow-ink);}
.bk-card h3{font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.08; margin:9px 0 0;}
.bk-card h3 a{transition:color .25s;}
.bk-card .bk-sub{font:italic 500 1.02rem/1.4 var(--font-display); color:var(--fg2); margin-top:6px;}
.bk-card .bk-ex{font:400 .94rem/1.65 var(--font-body); color:var(--fg2); margin-top:12px; max-width:54ch;}
.bk-card .bk-cardmeta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; font:500 .8rem/1.3 var(--font-body); color:var(--fg3);}
.bk-card .bk-cardmeta .dot{width:3px; height:3px; border-radius:50%; background:var(--border-strong);}
.bk-card .bk-cardcta{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font:700 .86rem/1 var(--font-body); color:var(--accent-strong);}
.bk-card .bk-cardcta vm-icon{transition:transform .25s var(--ease);}
@media (hover:hover){
  .bk-card:hover .bk-cover-link{transform:translateY(-5px) rotate(-1deg);}
  .bk-card:hover .bookcover{box-shadow:0 30px 60px -22px rgba(20,22,46,.6);}
  .bk-card:hover h3 a{color:var(--accent-strong);}
  .bk-card:hover .bk-cardcta vm-icon{transform:translateX(4px);}
}
@media (min-width:560px){ .bk-card{grid-template-columns:150px 1fr;} }
@media (min-width:900px){
  .bk-grid{grid-template-columns:1fr 1fr; gap:clamp(30px,3.4vw,52px) clamp(34px,4vw,64px);}
  .bk-card{grid-template-columns:140px 1fr;}
}

/* ---------------------------------------------------------------------
   Single book — immersive, parchment reading flow
   --------------------------------------------------------------------- */
.bk-single{background:var(--parchment-50);}
/* hero: cover floating over a deep midnight band */
.bs-hero{position:relative; overflow:hidden; background:var(--ink-900); color:var(--on-dark-1);
  padding-top:clamp(104px,14vw,140px); padding-bottom:clamp(40px,6vw,72px);}
.bs-hero-scrim{position:absolute; inset:0; z-index:1; background:
  radial-gradient(60% 70% at 22% 30%, rgba(226,203,148,.18), transparent 60%),
  linear-gradient(180deg, rgba(20,22,46,.4), rgba(20,22,46,.86));}
.bs-hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,48px); align-items:center;}
.bs-cover{width:min(240px,62vw); justify-self:center;}
.bs-cover .bookcover{box-shadow:0 36px 80px -30px rgba(0,0,0,.7), 0 4px 14px rgba(0,0,0,.3);}
.bs-crumb{display:flex; align-items:center; gap:9px; font:600 .8rem/1 var(--font-body); color:var(--on-dark-3); margin-bottom:14px; flex-wrap:wrap;}
.bs-crumb a{color:var(--on-dark-2); transition:color .25s;}
@media (hover:hover){ .bs-crumb a:hover{color:var(--gilt-300);} }
.bs-tag{display:inline-flex; align-items:center; gap:8px; font:700 .66rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gilt-300);}
.bs-head h1{color:var(--on-dark-1); font-size:clamp(2.4rem,5.4vw,3.9rem); line-height:1.04; margin:12px 0 0; letter-spacing:-.01em;}
.bs-head .bs-sub{font:italic 500 clamp(1.1rem,1.8vw,1.4rem)/1.4 var(--font-display); color:var(--gilt-100); margin-top:12px; max-width:40ch;}
.bs-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; font:500 .85rem/1.4 var(--font-body); color:var(--on-dark-2);}
.bs-meta .dot{width:4px; height:4px; border-radius:50%; background:var(--border-on-dark);}
.bs-meta vm-icon{color:var(--gilt-300);}
.bs-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px;}
.bs-cta-amz{display:inline-flex; align-items:center; gap:9px;}
.bs-cta-amz .bs-cta-ext{opacity:.72; margin-left:-2px;}
@media (min-width:840px){ .bs-hero-inner{grid-template-columns:300px 1fr;} .bs-cover{justify-self:start;} }

/* body: parchment column */
.bs-body{padding-block:clamp(40px,5vw,72px);}
.bs-shell{display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,56px);}
.bs-article{max-width:64ch;}
.bs-article .mvt{margin-bottom:14px;}
.bs-article h2{font-size:clamp(1.7rem,2.6vw,2.2rem); line-height:1.1;}
.bs-prose p{font:400 1.075rem/1.8 var(--font-body); color:var(--fg1); margin-top:18px;}
.bs-prose p:first-of-type{margin-top:18px;}
.bs-prose em{font-style:italic; color:var(--accent-strong);}
/* sample / excerpt — parchment card with drop cap */
.bs-sample{position:relative; margin:clamp(28px,4vw,42px) 0; padding:clamp(26px,3.4vw,40px); background:var(--surface);
  border:1px solid var(--hairline-gold); border-radius:16px; box-shadow:var(--shadow-sm);}
.bs-sample::before{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); pointer-events:none;}
.bs-sample-lbl{display:inline-flex; align-items:center; gap:8px; font:700 .66rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--eyebrow-ink); margin-bottom:14px;}
.bs-sample-lbl vm-icon{color:var(--gilt-700);}
.bs-sample p{font:italic 500 clamp(1.2rem,2vw,1.5rem)/1.55 var(--font-display); color:var(--fg1); letter-spacing:-.01em;}
.bs-sample p::first-letter{float:left; font-size:3.4em; line-height:.8; padding:6px 12px 0 0; color:var(--accent-strong); font-weight:600;}
/* scripture */
.bs-scripture{margin:clamp(26px,3.4vw,40px) 0; padding-left:18px; border-left:2px solid var(--hairline-gold);}
.bs-scripture blockquote{margin:0; font:italic 500 clamp(1.2rem,2vw,1.5rem)/1.5 var(--font-display); color:var(--fg1);}
.bs-scripture .cite{margin-top:10px;}
/* author reflection */
.bs-reflection{display:flex; gap:16px; align-items:flex-start; margin-top:clamp(28px,4vw,40px); padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--border);}
.bs-reflection-mark{flex:0 0 auto; width:52px; height:60px; border-radius:50% 50% 12px 12px / 60% 60% 12px 12px; display:flex; align-items:center; justify-content:center;
  color:var(--gilt-700); border:1.5px solid var(--hairline-gold); background:var(--gilt-100);}
.bs-reflection-body .bs-reflection-h{font:700 .68rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--fg3);}
.bs-reflection-body p{font:italic 500 1.1rem/1.6 var(--font-display); color:var(--fg1); margin-top:8px;}
.bs-reflection-body .bs-reflection-by{display:block; font:700 .82rem/1 var(--font-body); color:var(--accent-strong); margin-top:10px; font-style:normal;}

/* aside: details + related teaching */
.bs-aside{display:flex; flex-direction:column; gap:18px;}
.bs-facts{background:var(--surface-warm); border:1px solid var(--border-soft); border-radius:16px; padding:22px 24px;}
.bs-facts h3{font:700 .7rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--fg3); margin-bottom:14px;}
.bs-facts dl{display:grid; grid-template-columns:auto 1fr; gap:10px 14px; margin:0;}
.bs-facts dt{font:600 .82rem/1.3 var(--font-body); color:var(--fg3);}
.bs-facts dd{margin:0; font:600 .86rem/1.3 var(--font-body); color:var(--fg1); text-align:right;}
.bs-related{background:linear-gradient(165deg, var(--indigo-600), var(--ink-900) 76%); color:var(--on-dark-1); border-radius:16px; padding:24px; position:relative; overflow:hidden;}
.bs-related::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 80% 12%, rgba(226,203,148,.2), transparent 62%); pointer-events:none;}
.bs-related>*{position:relative;}
.bs-related .bs-related-lbl{font:700 .66rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--gilt-300);}
.bs-related h3{font:600 1.25rem/1.18 var(--font-display); color:var(--on-dark-1); margin:8px 0 0;}
.bs-related p{font:400 .88rem/1.55 var(--font-body); color:var(--on-dark-2); margin-top:8px;}
.bs-related .qlink{margin-top:14px;}
@media (min-width:900px){ .bs-shell{grid-template-columns:1.55fr .9fr; align-items:start;} .bs-aside{position:sticky; top:96px;} }

/* more to read */
.bs-more{background:var(--surface-warm); border-top:1px solid var(--border-soft);}
.bs-more-head{max-width:60ch;}
.bs-more-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,30px); margin-top:clamp(24px,3vw,34px);}
.bs-more-card{display:flex; flex-direction:column; gap:14px;}
.bs-more-card .bookcover{transition:transform .4s var(--ease);}
.bs-more-card .bk-theme{font:700 .62rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow-ink);}
.bs-more-card .bs-more-t{font:600 1.18rem/1.14 var(--font-display); color:var(--fg1); margin-top:2px; transition:color .25s;}
@media (hover:hover){ .bs-more-card:hover .bookcover{transform:translateY(-5px) rotate(-1deg);} .bs-more-card:hover .bs-more-t{color:var(--accent-strong);} }
@media (min-width:720px){ .bs-more-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){ .bs-more-grid{grid-template-columns:repeat(4,1fr); max-width:none;} }

@media (prefers-reduced-motion:reduce){
  .bk-card .bk-cover-link, .bs-more-card .bookcover{transition:none !important;}
}