/* "Which book?" page (ported 2026-11-01 from the 10-29 draft). Live site identity (paper, navy, Manrope + DM Sans,
   Georgia italic second lines), elevated to the full-bleed standard: every book is a full screen
   built from its own cover or art, on a saturated ground taken from that cover. Grounds hand off
   by gradient; no cards, boxes or rules. Scope: everything sits under body.ml-books. */

.ml-books{
  --paper:#f8f5ed;
  --navy:#172d3d;
  --ink:#172d3d;
  --muted:#52616c;
  --coral:#f04d49;
  --accent:#c8372f;      /* italic on paper, 4.8:1 */
  --cream:#f8f5ed;
  --sp:#8e431a;          /* Systems: the cover's "LOCAL CHURCH" brown, cream text 6.6:1 */
  --fy:#c3242c;          /* This Book Is for You: the cover red, deepened for 5.6:1 white text */
  --fy-hi:#ef4f4c;       /* the cover's own red, art side only */
  --ph:#2c3828;          /* The Pathway Home: the cover's sage, taken to deep olive */
  --ph-hi:#8a8e7c;
  --fg:#561723;          /* The First Generation Couple: wine (live button), cream 12:1 */
  --header-h:86px;
  --serif:Georgia,'Times New Roman',serif;
}
@media (max-width:1250px){.ml-books{--header-h:78px}}
@media (max-width:600px){.ml-books{--header-h:74px}}

body.ml-books{background:var(--navy)}
.ml-books main{overflow-x:clip}
.ml-books main p{color:inherit;line-height:1.6}
.ml-books main figure,.ml-books main ol{margin:0}

.ml-books main h1,.ml-books main h2{font-family:var(--display);font-weight:650;letter-spacing:-.055em;color:inherit}
.ml-books main em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.04em}
.ml-books .poster{font-size:clamp(46px,6.6vw,118px);line-height:.98}
.ml-books .eyebrow{font-size:11px;font-weight:750;letter-spacing:.14em;line-height:1.7;margin-bottom:22px}
.ml-books .shell{width:min(1240px,calc(100% - 96px));margin-inline:auto}
@media (max-width:850px){.ml-books .shell{width:calc(100% - 48px)}}
@media (max-width:600px){.ml-books .shell{width:calc(100% - 40px)}}
@media (max-width:360px){.ml-books .shell{width:calc(100% - 32px)}}

.ml-books .btn{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;padding:16px 23px;min-height:55px;background:var(--navy);color:#fff;font-size:15px;font-weight:650;line-height:1.35;border-radius:3px;box-shadow:0 7px 14px #0000001f;transition:background .18s,transform .18s}
.ml-books .btn>span:last-child{font-size:20px;line-height:1}
.ml-books .btn:hover{transform:translateY(-2px)}
.ml-books .btn--light{background:var(--cream);color:var(--navy)}
.ml-books .btn--light:hover{background:#fff}
.ml-books .text-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;border-bottom:1px solid currentColor;font-size:14px;font-weight:650;line-height:1.4}
.ml-books .text-link:hover{opacity:.8}
.ml-books .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}

/* ---------- I · Hero ---------- */
.ml-books .hero{position:relative;gap:0;min-height:calc(100svh - var(--header-h));background:var(--navy);color:var(--cream);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;overflow:hidden;padding:clamp(40px,6vh,80px) 0 clamp(40px,6vh,80px) max(48px,calc((100vw - 1240px)/2))}
.ml-books .hero::after{content:"";position:absolute;inset:auto 0 0;height:22vh;background:linear-gradient(#172d3d00,#172d3d);pointer-events:none}
.ml-books .hero-copy{position:relative;z-index:2}
.ml-books .hero .eyebrow{color:#a9b9c3}
.ml-books .hero h1{font-size:clamp(50px,7.6vw,132px);line-height:.95}
.ml-books .hero h1 em{color:#f47b70}
.ml-books .hero .lead{margin-top:28px;max-width:30ch;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:#c8d2d9}
.ml-books .hero-quick{margin-top:34px}
.ml-books .quick-label{font-size:13px;font-weight:650;letter-spacing:.02em;color:#a9b9c3;margin-bottom:12px}

.ml-books .deck{position:relative;align-self:stretch;min-height:560px}
.ml-books .deck-card{position:absolute;left:50%;top:50%;width:clamp(170px,18vw,330px);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ml-books .deck-card img{width:100%;box-shadow:0 28px 50px #00000059,0 6px 12px #0000003d;border-radius:2px}
.ml-books .deck-card span{position:absolute;left:0;right:0;top:calc(100% + 14px);font-size:13px;font-weight:650;line-height:1.35;color:#c8d2d9;text-align:center;opacity:0;transition:opacity .25s}
.ml-books .deck-card:hover,.ml-books .deck-card:focus-visible{z-index:5}
.ml-books .deck-card:hover span,.ml-books .deck-card:focus-visible span{opacity:1}
.ml-books .d1{--x:-92%;--y:-4%;--r:-8deg;z-index:1}
.ml-books .d2{--x:-32%;--y:-12%;--r:-2.5deg;z-index:2}
.ml-books .d3{--x:28%;--y:-8%;--r:3deg;z-index:3}
.ml-books .d4{--x:86%;--y:4%;--r:8deg;z-index:4}
.ml-books .deck-card:hover{transform:translate(calc(-50% + var(--x)),calc(-56% + var(--y))) rotate(0deg)}

/* ---------- II · Start here if… ---------- */
.ml-books .guide{background:linear-gradient(var(--navy),var(--paper) 22vh);padding:clamp(120px,22vh,220px) 0 clamp(90px,14vh,150px)}
.ml-books .guide .eyebrow{color:var(--muted)}
.ml-books .guide h2 em{color:var(--accent)}
.ml-books .guide .poster{font-size:clamp(56px,9vw,160px)}
.ml-books .guide-list{list-style:none;padding:0;margin-top:clamp(36px,6vh,70px);counter-reset:g;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,3vh,40px) clamp(32px,5vw,80px)}
@media (max-width:899px){.ml-books .guide-list{grid-template-columns:1fr}}
.ml-books .guide-list li{counter-increment:g}
.ml-books .guide-list a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,3vw,48px);padding:clamp(18px,3vh,30px) 0;align-items:baseline}
.ml-books .guide-list a::before{content:"0" counter(g);grid-row:span 2;font:650 13px/1 var(--display);letter-spacing:.1em;color:var(--accent);padding-top:.9em}
.ml-books .g-if{font-family:var(--display);font-weight:650;font-size:clamp(26px,3.1vw,50px);line-height:1.06;letter-spacing:-.045em;max-width:20ch}
.ml-books .g-book{display:inline-flex;gap:14px;margin-top:12px;font-size:15px;font-weight:650;color:var(--muted)}
.ml-books .guide-list a:hover .g-if{color:var(--accent)}
.ml-books .guide-list a:hover .g-book>span:last-child{transform:translateY(4px)}
.ml-books .g-book>span:last-child{transition:transform .2s}

/* ---------- Scenes (shared) ---------- */
.ml-books .scene{position:relative;min-height:max(100svh,760px);color:var(--cream);overflow:hidden;display:flex;align-items:center}
.ml-books .sc-copy{position:relative;z-index:3;width:min(620px,48vw);margin-left:max(48px,calc((100vw - 1240px)/2));padding:clamp(80px,14vh,140px) 0}
.ml-books .sc-copy .eyebrow{color:#ffffffc7}
.ml-books .sc-copy h2 em{display:inline-block}
.ml-books .sc-copy>p:not(.eyebrow):not(.sc-next-label):not(.sc-fine):not(.roles){max-width:44ch;font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:#fffffff0}
.ml-books .sc-book{margin:26px 0 14px;font-size:15px!important;font-weight:750;letter-spacing:.02em}
.ml-books .sc-next-label{margin:34px 0 14px;font-size:11px;font-weight:750;letter-spacing:.14em;color:#ffffffc7}
.ml-books .sc-fine{margin-top:22px;max-width:52ch;font-size:13px;line-height:1.6;color:#ffffffd9}
.ml-books .sc-fine a{border-bottom:1px solid currentColor;display:inline-block;min-height:24px}
.ml-books .sc-art{position:absolute;z-index:1;margin:0}
.ml-books .sc-art img{width:100%}

/* Systems: burnt orange; the cover stands into the screen from the right and bleeds off the bottom */
.ml-books .sc-sp{background:linear-gradient(var(--paper),var(--sp) 16vh)}
.ml-books .sc-sp .sc-art{right:-3vw;top:12vh;width:min(44vw,825px)}
.ml-books .sc-sp .sc-art img{box-shadow:-30px 40px 80px #0000004d}
.ml-books .sc-sp h2 em{color:#ffd9b8}

/* This Book Is for You: full red; the cover face is a wall bleeding off the right */
.ml-books .sc-fy{background:linear-gradient(var(--sp),var(--fy) 16vh)}
.ml-books .sc-fy .sc-art{left:-7vw;top:-6vh;width:min(44vw,695px)}
.ml-books .sc-fy .sc-copy{margin-left:auto;margin-right:max(48px,calc((100vw - 1240px)/2));width:min(600px,46vw)}
.ml-books .sc-fy .sc-art img{box-shadow:30px 40px 80px #0000003d}
.ml-books .sc-fy h2 em{color:#ffe1dc}
.ml-books .roles{display:flex;flex-wrap:wrap;gap:0 .5em;margin-top:26px;font-family:var(--display);font-weight:650;font-size:clamp(28px,3.4vw,54px);line-height:1.04;letter-spacing:-.05em;text-transform:uppercase}
.ml-books .roles span:not(:last-child)::after{content:"/";margin-left:.5em;opacity:.55}

/* The Pathway Home: deep olive; the road runs the full height on the right and drifts with scroll */
.ml-books .sc-ph{background:linear-gradient(var(--fy),var(--ph) 18vh)}
.ml-books .sc-ph .sc-art{right:0;top:0;bottom:0;width:min(46vw,724px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.ml-books .sc-ph .sc-art img{will-change:transform;transform:translateY(var(--drift,0px))}
.ml-books .sc-ph h2 em{color:#dfe3c9}
.ml-books .ph-pair{display:flex;gap:18px;margin-top:28px}
.ml-books .ph-pair img{width:clamp(92px,8vw,128px);box-shadow:0 18px 30px #00000059}

/* The First Generation Couple: wine; the cover stands into the screen from the right */
.ml-books .sc-fg{background:linear-gradient(var(--ph),var(--fg) 18vh)}
.ml-books .sc-fg .sc-art{right:-2vw;top:14vh;width:min(42vw,760px)}
.ml-books .sc-fg .sc-art img{box-shadow:-30px 40px 80px #0000004d}
.ml-books .sc-fg h2 em{color:#f6d3c8}

/* ---------- VII · Closing ---------- */
.ml-books .closing{background:linear-gradient(var(--fg),var(--navy) 22vh);color:var(--cream);padding:clamp(130px,24vh,240px) 0 clamp(100px,16vh,160px)}
.ml-books .closing .eyebrow{color:#a9b9c3}
.ml-books .closing h2 em{color:#f47b70}
.ml-books .closing .actions{margin-top:44px}

/* ---------- Motion (books.js adds html.motion only when allowed) ---------- */
@keyframes deal{from{transform:translate(-50%,-40%) rotate(0deg);opacity:0}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r));opacity:1}}
@keyframes bob{from{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r))}to{transform:translate(calc(-50% + var(--x)),calc(-53% + var(--y))) rotate(calc(var(--r) * .7))}}
.ml-books.motion .deck-card{animation:deal 1.1s cubic-bezier(.2,.75,.2,1) both,bob 6.5s ease-in-out 1.2s infinite alternate;animation-delay:calc(var(--i) * .12s + .15s),calc(var(--i) * .9s + 1.4s)}
.ml-books.motion .deck-card:hover,.ml-books.motion .deck-card:focus-visible{animation-play-state:paused}
.ml-books.motion .sc-art:not(.road){transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .9s}
.ml-books.motion .sc-sp .sc-art:not(.in),.ml-books.motion .sc-fg .sc-art:not(.in){transform:translateX(10vw);opacity:0}
.ml-books.motion .sc-fy .sc-art:not(.in){transform:translateX(-12vw);opacity:0}
.ml-books.motion .sc-copy>*{transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .8s}
.ml-books.motion .scene:not(.in) .sc-copy>*{transform:translateY(26px);opacity:0}

/* ---------- Phone & small tablet: own full-bleed crops ---------- */
@media (max-width:899px){
  .ml-books .hero{grid-template-columns:1fr;align-content:start;padding:0 0 56px;min-height:0}
  .ml-books .deck{order:-1;min-height:0;height:clamp(250px,72vw,420px);margin:0 0 4px}
  .ml-books .deck-card{width:clamp(108px,31vw,200px);top:54%}
  .ml-books .d1{--x:-102%;--y:-8%}.ml-books .d2{--x:-34%;--y:-16%}.ml-books .d3{--x:34%;--y:-11%}.ml-books .d4{--x:102%;--y:-2%}
  .ml-books .deck-card span{display:none}
  .ml-books .hero-copy{padding:0 24px}
  .ml-books .hero h1{font-size:clamp(44px,13vw,84px)}
  .ml-books .hero .lead{margin-top:20px}
  .ml-books .hero-quick{margin-top:24px}
  .ml-books .scene{display:block;min-height:0}
  .ml-books .sc-copy,.ml-books .sc-fy .sc-copy{width:auto;margin:0;padding:34px 24px 84px}
  .ml-books .sc-art{position:relative;inset:auto!important;width:100%!important;overflow:hidden}
  .ml-books .scene .poster{font-size:clamp(42px,12.4vw,80px)}
  /* Systems: the cover bleeds off the right edge and the bottom of the band */
  .ml-books .sc-sp{background:linear-gradient(var(--paper),var(--sp) 90px)}
  .ml-books .sc-sp .sc-art{height:min(88svh,640px);padding-top:56px}
  .ml-books .sc-sp .sc-art img{width:min(84vw,825px);margin-left:22vw}
  .ml-books .sc-sp .sc-art::after,.ml-books .sc-fy .sc-art::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,var(--g))}
  .ml-books .sc-sp .sc-art::after{--g:var(--sp)}
  .ml-books .sc-fy{background:linear-gradient(var(--sp),var(--fy) 90px)}
  .ml-books .sc-fy .sc-art{height:min(84svh,620px);padding-top:40px}
  .ml-books .sc-fy .sc-art img{width:min(88vw,695px);margin-left:-6vw}
  .ml-books .sc-fy .sc-art::after{--g:var(--fy)}
  .ml-books .sc-ph{background:linear-gradient(var(--fy),var(--ph) 90px)}
  .ml-books .sc-ph .sc-art{height:86svh;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 82%,transparent)}
  .ml-books .sc-ph .sc-art img{width:min(100%,724px);margin-inline:auto}
  .ml-books .sc-fg{background:linear-gradient(var(--ph),var(--fg) 90px)}
  .ml-books .sc-fg .sc-art{height:min(88svh,640px);padding-top:56px}
  .ml-books .sc-fg .sc-art img{width:min(84vw,914px);margin-left:22vw}
  .ml-books .sc-fg .sc-art::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,var(--fg))}
  .ml-books.motion .sc-sp .sc-art:not(.in),.ml-books.motion .sc-fg .sc-art:not(.in){transform:translateX(18vw)}
  .ml-books.motion .sc-fy .sc-art:not(.in){transform:translateX(-18vw)}
}
@media (max-width:360px){.ml-books .btn{gap:14px;padding:15px 18px}}
@media (max-height:520px) and (max-width:899px){.ml-books .sc-ph .sc-art,.ml-books .sc-sp .sc-art,.ml-books .sc-fy .sc-art{height:auto;max-height:none}}

@media (prefers-reduced-motion:reduce){
  
  .ml-books .deck-card,.ml-books .btn,.ml-books .g-book>span:last-child{transition:none}
}