/* /books/<slug>/ (templates/book_detail.html): one volume's page. Loaded after
   books.css, whose tokens and pieces it reuses (.bks-btn, .bks-chips, .bks-faq,
   .bks-author, the 3D book). Everything here is scoped under .bkd; the volume's
   colour is --c / --rgb / --t, set by .bkd--blue|gold|red. */

.bkd--blue{ --c:#5bc3f9; --rgb:91,195,249; --t:#5bc3f9; }
.bkd--gold{ --c:#f5c542; --rgb:245,197,66; --t:#f5c542; }
.bkd--red{ --c:#E8282B; --rgb:232,40,43; --t:#ff6b6e; }

/* ---- hero ---- */
.bkd-hero{ position:relative; max-width:1280px; margin:0 auto; padding:calc(var(--bks-navh) + 40px) clamp(16px,4vw,48px) 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:24px 64px; align-items:center; }
.bkd-hero > .flash-banner{ grid-column:1/-1; margin:0; }
.bkd-hero-glow{ position:absolute; inset:0 0 -20% calc(50% - 50vw); background:radial-gradient(ellipse 45% 50% at 75% 50%,rgba(var(--rgb),.18),transparent 70%); pointer-events:none; }
.bkd-hero-text{ position:relative; min-width:0; }
.bkd-crumbs ol{ display:flex; flex-wrap:wrap; gap:6px; color:#6f7c96; font-size:13px; }
.bkd-crumbs li + li::before{ content:"›"; margin-right:6px; color:#6f7c96; }
.bks .bkd-crumbs a{ color:#a3afc6; }
.bks .bkd-crumbs a:hover{ color:#f4f7fc; }
.bkd-crumbs [aria-current]{ color:#d6deeb; }
.bkd-eyebrow{ display:block; margin-top:28px; color:var(--t); font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.bkd-h1{ margin-top:14px; color:#f4f7fc; font-size:clamp(40px,5.4vw,72px); font-weight:700; letter-spacing:-.04em; line-height:1; text-wrap:balance; overflow-wrap:break-word; }
.bkd-sub{ margin-top:16px; color:#d6deeb; font-size:clamp(17px,1.6vw,20px); font-weight:600; letter-spacing:-.01em; line-height:1.4; }
.bkd-desc{ max-width:560px; margin-top:16px; color:#a3afc6; font-size:16px; line-height:1.65; text-wrap:pretty; }
.bkd-buy{ margin-top:26px; }
.bkd-langs{ margin-top:24px; gap:6px 18px; }
.bkd-langs li{ font-size:14px; }
.bkd-footnote{ margin-top:14px; color:#6f7c96; font-size:12.5px; }
.bkd-hero-art{ --k:1; position:relative; min-width:0; min-height:calc(620px * var(--k)); display:flex; align-items:center; justify-content:center; }
.bkd-hero-art .bks-vol-book{ transform:scale(var(--k)); margin:calc(551px * (var(--k) - 1) / 2) calc(367px * (var(--k) - 1) / 2); }
@media (max-width:999px){ .bkd-hero-art{ order:-1; --k:.7; } .bkd-hero-text{ order:0; } }
@media (max-width:479px){ .bkd-hero-art{ --k:.56; } }

/* ---- sections ---- */
.bkd-sec{ position:relative; max-width:1080px; margin:0 auto; padding:clamp(64px,8vw,110px) clamp(16px,4vw,48px) 0; }
.bkd-sec:last-of-type{ padding-bottom:clamp(64px,8vw,110px); }
.bkd-h2{ color:#f4f7fc; font-size:clamp(28px,3.6vw,44px); font-weight:700; letter-spacing:-.035em; line-height:1.06; text-wrap:balance; }
.bkd-h2::before{ content:""; display:block; width:28px; height:2px; margin-bottom:18px; background:var(--c); }
.bkd-h3{ margin-top:8px; color:#f4f7fc; font-size:clamp(22px,2.4vw,28px); font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.bkd-kicker{ color:var(--t); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.bkd-lede{ color:#d6deeb; font-size:18px; line-height:1.6; }
.bkd-note{ margin-top:12px; color:#6f7c96; font-size:14px; }
.bkd-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:24px 64px; }
.bkd-points{ margin-top:20px; font-size:16px; }


/* ---- the sample: a page of the book ---- */
.bkd-sample{ max-width:720px; margin-top:36px; padding:clamp(24px,4vw,44px); border:1px solid rgba(160,180,220,.14); border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); }
.bkd-sample > p:not(.bkd-kicker):not(.bkd-tip){ margin-top:18px; color:#d6deeb; font-size:17px; line-height:1.75; text-wrap:pretty; }
.bkd-fig{ margin:26px 0 8px; }
.bkd-fig img{ display:block; width:100%; height:auto; border-radius:10px; }
.bkd-fig figcaption{ margin-top:12px; color:#a3afc6; font-size:14px; line-height:1.55; }
.bkd-tip{ margin-top:22px; padding:14px 18px; border-left:3px solid var(--c); background:rgba(var(--rgb),.08); color:#f4f7fc; font-size:16px; font-weight:600; }

/* ---- contents ---- */
.bkd-toc{ columns:2 340px; column-gap:56px; margin-top:32px; }
.bkd-part{ break-inside:avoid; padding:20px 0 24px; border-top:1px solid rgba(160,180,220,.14); }
.bkd-part-h{ display:flex; align-items:baseline; gap:12px; color:#f4f7fc; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.bkd-part-n{ color:var(--t); font-size:13px; font-weight:800; letter-spacing:.08em; min-width:28px; }
.bkd-part ol{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.bkd-part li{ display:flex; gap:12px; color:#a3afc6; font-size:15px; line-height:1.45; }
.bkd-ch-n{ flex:none; min-width:28px; color:#6f7c96; font-variant-numeric:tabular-nums; }

/* ---- the exercise ---- */
.bkd-drill{ max-width:760px; margin-top:36px; padding:clamp(24px,4vw,40px); border:1px solid rgba(var(--rgb),.3); border-radius:16px; background:rgba(var(--rgb),.05); }
.bkd-drill-facts{ display:flex; flex-direction:column; gap:14px; margin:20px 0 0; }
.bkd-drill-facts dt{ color:var(--t); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.bkd-drill-facts dd{ margin:4px 0 0; color:#d6deeb; font-size:15.5px; line-height:1.6; }
.bkd-steps{ counter-reset:step; display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.bkd-steps li{ counter-increment:step; display:flex; gap:14px; color:#f4f7fc; font-size:16px; line-height:1.55; }
.bkd-steps li::before{ content:counter(step); flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--c); color:#05080f; font-size:13px; font-weight:800; }

/* ---- pages from inside ---- */

.bkd-authors{ margin-top:40px; }
.bkd-faq-sec .bks-faq{ margin-top:28px; }

/* ---- the series ---- */
.bkd-series{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:20px; margin-top:32px; }
.bkd-vol{ display:flex; gap:18px; padding:20px; border:1px solid rgba(160,180,220,.14); border-radius:14px; }
.bkd-vol.is-current{ border-color:rgba(var(--rgb),.5); background:rgba(var(--rgb),.06); }
.bkd-vol img{ flex:none; width:84px; height:auto; align-self:flex-start; border-radius:3px; }
.bkd-vol-eyebrow{ color:var(--t); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.bkd-vol-title{ margin-top:6px; color:#f4f7fc; font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.bks .bkd-vol-title a{ color:#f4f7fc; }
.bks .bkd-vol-title a:hover{ color:var(--t); }
.bkd-vol-line{ margin-top:6px; color:#a3afc6; font-size:14px; line-height:1.5; }
.bkd-vol-meta{ margin-top:8px; color:#6f7c96; font-size:13px; }
.bkd-here{ margin-top:10px; color:var(--t); font-size:13px; font-weight:700; }
.bks .bkd-more{ display:inline-block; margin-top:10px; color:var(--t); font-size:14px; font-weight:600; }
.bkd-bundle{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; margin-top:28px; padding:clamp(22px,3vw,32px); border:1px solid rgba(245,197,66,.3); border-radius:16px; background:rgba(245,197,66,.05); }
.bkd-bundle .bks-eyebrow{ margin:0; }
.bkd-bundle-h{ margin-top:10px; color:#f4f7fc; font-size:clamp(22px,2.6vw,30px); font-weight:700; letter-spacing:-.03em; }
.bkd-bundle-price{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; font-size:15px; color:#6f7c96; }
.bkd-bundle-price > .bks-grad-gold{ font-size:40px; font-weight:600; letter-spacing:-.04em; line-height:1; }
.bkd-bundle-buy{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.bkd-all{ margin-top:24px; font-size:15px; font-weight:600; }

.bkd .lang-links ul{ justify-content:flex-start; }

/* ---- on a real circuit ---- */
.bkd-real{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:28px 40px; margin-top:32px; }
.bkd-real > div{ padding-top:18px; border-top:1px solid rgba(160,180,220,.14); }
.bkd-real-h{ color:#f4f7fc; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.bkd-real .bks-points{ margin-top:14px; }

/* ---- the conversion review (2026-11-04) ---- */
.bkd-kind{ margin-top:14px; color:var(--t); font-size:14px; font-weight:600; }
.bkd-context{ max-width:720px; margin-top:18px; color:#a3afc6; font-size:16px; line-height:1.65; text-wrap:pretty; }
.bkd-hero .bks-upsell{ margin-top:18px; }

/* ---- "What you will learn" (the traction circle) and "A structured way to learn" (the
   chapter spine): Book Learn Sections.dc.html in the coaching handoff (2026-11-04).
   Every hover is CSS; the trace redraws through :has(). ---- */
.bkd-center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.bkd-rule--gold{ background:#f5c542; }
.bkd-tc-sec{ max-width:1280px; }
.bkd-tc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,360px) minmax(0,1fr); gap:28px clamp(24px,3vw,48px); align-items:center; margin-top:clamp(48px,6vw,80px); }
.bkd-tc-col{ display:flex; flex-direction:column; gap:clamp(28px,4vw,52px); margin:0; padding:0; list-style:none; }
.bkd-tc-col--l{ text-align:right; }
.bkd-tc-item{ display:flex; align-items:flex-start; gap:18px; transition:transform .4s var(--bks-ease),margin .4s; }
.bkd-tc-col--l .bkd-tc-item{ flex-direction:row-reverse; }
.bkd-tc-col--l .bkd-tc-item:nth-child(2){ margin-right:48px; }
.bkd-tc-col--r .bkd-tc-item:nth-child(2){ margin-left:48px; }
.bkd-tc-mark{ flex:none; display:flex; align-items:center; gap:14px; }
.bkd-tc-col--l .bkd-tc-mark{ flex-direction:row-reverse; }
.bkd-tc-lead{ display:block; width:24px; height:1px; transition:width .5s var(--bks-ease); }
.bkd-tc-col--l .bkd-tc-lead{ background:linear-gradient(90deg,rgba(91,195,249,.9),rgba(91,195,249,0)); }
.bkd-tc-col--r .bkd-tc-lead{ background:linear-gradient(270deg,rgba(245,197,66,.9),rgba(245,197,66,0)); }
.bkd-tc-num{ font-size:40px; font-weight:800; letter-spacing:-.05em; line-height:.9; color:transparent; -webkit-background-clip:text; background-clip:text; transition:filter .4s; }
.bkd-tc-col--l .bkd-tc-num{ -webkit-text-stroke:1px rgba(91,195,249,.55); }
.bkd-tc-col--r .bkd-tc-num{ -webkit-text-stroke:1px rgba(245,197,66,.55); }
.bkd-tc-item p{ max-width:320px; color:#a3afc6; font-size:16px; line-height:1.6; text-wrap:pretty; transition:color .3s; }
.bkd-tc-item:hover{ transform:translateY(-4px); }
.bkd-tc-item:hover p{ color:#f4f7fc; }
.bkd-tc-item:hover .bkd-tc-lead{ width:56px; }
.bkd-tc-col--l .bkd-tc-item:hover .bkd-tc-num{ -webkit-text-stroke-color:rgba(143,214,251,.9); background-image:linear-gradient(180deg,#8fd6fb,#5bc3f9 50%,#2f6bff); filter:drop-shadow(0 6px 20px rgba(91,195,249,.5)); }
.bkd-tc-col--r .bkd-tc-item:hover .bkd-tc-num{ -webkit-text-stroke-color:rgba(247,227,161,.9); background-image:linear-gradient(180deg,#f7e3a1,#f5c542 50%,#e0975a); filter:drop-shadow(0 6px 20px rgba(245,197,66,.5)); }

.bkd-tc-circle{ position:relative; width:100%; max-width:360px; aspect-ratio:1; justify-self:center; }
.bkd-tc-glow{ position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle,rgba(47,107,255,.18),transparent 70%); transition:transform .6s var(--bks-ease); }
.bkd-tc-circle svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.bkd-tc-trace{ stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
.bkd-tc-dot--gold{ filter:drop-shadow(0 0 8px rgba(245,197,66,.9)); }
.bkd-tc-dot--blue{ filter:drop-shadow(0 0 8px rgba(91,195,249,.9)); }
.bkd-tc:has(.bkd-tc-item:hover) .bkd-tc-glow{ transform:scale(1.12); }
.bkd-tc:has([data-n="1"]:hover) .bkd-tc-trace{ stroke-dashoffset:.8333; }
.bkd-tc:has([data-n="2"]:hover) .bkd-tc-trace{ stroke-dashoffset:.6667; }
.bkd-tc:has([data-n="3"]:hover) .bkd-tc-trace{ stroke-dashoffset:.5; }
.bkd-tc:has([data-n="4"]:hover) .bkd-tc-trace{ stroke-dashoffset:.3333; }
.bkd-tc:has([data-n="5"]:hover) .bkd-tc-trace{ stroke-dashoffset:.1667; }
.bkd-tc-label{ position:absolute; color:#6f7c96; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }
.bkd-tc-label--top{ left:50%; top:-2%; transform:translate(-50%,-100%); color:#f5c542; }
.bkd-tc-label--bottom{ left:50%; bottom:-2%; transform:translate(-50%,100%); color:#5bc3f9; }
.bkd-tc-label--left{ left:-1%; top:50%; transform:translate(-100%,-50%); }
.bkd-tc-label--right{ right:-1%; top:50%; transform:translate(100%,-50%); }
.bkd-tc-label--centre{ left:50%; top:50%; transform:translate(-50%,-50%); }
@media (max-width:1140px){
  .bkd-tc{ grid-template-columns:minmax(0,1fr); }
  .bkd-tc-circle{ order:-1; max-width:340px; margin:0 auto 24px; }
  .bkd-tc-col{ gap:28px; }
  .bkd-tc-col--l{ text-align:left; }
  .bkd-tc-col--l .bkd-tc-item,.bkd-tc-col--l .bkd-tc-mark{ flex-direction:row; }
  .bkd-tc-col .bkd-tc-item:nth-child(2){ margin:0; }
  .bkd-tc-lead{ display:none; }
}
/* On a narrow phone the side labels would leave the screen: tuck them inside. */
@media (max-width:479px){
  .bkd-tc-circle{ max-width:280px; }
  .bkd-tc-label--left{ left:4%; transform:translate(0,-140%); }
  .bkd-tc-label--right{ right:4%; transform:translate(0,-140%); }
}

.bkd-spine-sec{ max-width:1280px; }
.bkd-spine-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:56px clamp(40px,6vw,96px); align-items:start; }
.bkd-spine-h2{ margin-top:18px; color:#f4f7fc; font-size:clamp(40px,5.6vw,72px); font-weight:700; letter-spacing:-.04em; line-height:.98; text-wrap:balance; }
.bkd-spine-h2 .bks-grad-gold{ --gs:45%; }
.bkd-spine-lede{ max-width:520px; margin-top:28px; color:#d6deeb; font-size:18px; line-height:1.65; text-wrap:pretty; }
.bkd-spine{ position:relative; display:flex; flex-direction:column; gap:clamp(36px,4.5vw,56px); margin:0; padding:0 0 0 44px; list-style:none; }
.bkd-spine::before{ content:""; position:absolute; left:7px; top:10px; bottom:10px; width:2px; border-radius:2px; background:linear-gradient(180deg,#5bc3f9,rgba(160,180,220,.25) 50%,#f5c542); }
.bkd-stop{ --sc:#5bc3f9; --srgb:91,195,249; position:relative; transition:transform .4s var(--bks-ease); }
.bkd-stop--2{ --sc:#8fb8f0; --srgb:143,184,240; }
.bkd-stop--3{ --sc:#d4c08a; --srgb:212,192,138; }
.bkd-stop--4{ --sc:#f5c542; --srgb:245,197,66; }
.bkd-stop-dot{ position:absolute; left:-44px; top:4px; width:16px; height:16px; border-radius:50%; background:#05080f; border:2px solid var(--sc); box-shadow:0 0 0 5px rgba(var(--srgb),.08); transition:all .35s var(--bks-ease); }
.bkd-stop-label{ display:block; color:var(--sc); font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.bkd-stop-big{ display:block; margin-top:6px; font-size:clamp(64px,8vw,104px); font-weight:800; letter-spacing:-.06em; line-height:.85; background:linear-gradient(90deg,#8fd6fb,#5bc3f9 45%,#f5c542); -webkit-background-clip:text; background-clip:text; color:transparent; transition:filter .4s; }
.bkd-stop p{ max-width:460px; margin-top:8px; color:#d6deeb; font-size:clamp(17px,1.5vw,20px); font-weight:500; letter-spacing:-.01em; line-height:1.45; text-wrap:pretty; transition:color .3s; }
.bkd-stop:hover{ transform:translateX(8px); }
.bkd-stop:hover p{ color:#f4f7fc; }
.bkd-stop:hover .bkd-stop-dot{ background:var(--sc); box-shadow:0 0 0 6px rgba(var(--srgb),.16),0 0 22px rgba(var(--srgb),.7); transform:scale(1.2); }
.bkd-stop:hover .bkd-stop-big{ filter:drop-shadow(0 8px 28px rgba(91,195,249,.5)); }

@media (prefers-reduced-motion:reduce){
  .bkd-tc-item,.bkd-tc-lead,.bkd-tc-trace,.bkd-tc-glow,.bkd-stop,.bkd-stop-dot{ transition:none; }
  .bkd-tc-item:hover,.bkd-stop:hover{ transform:none; }
}

/* ---- "Inside the book": the /books/ gallery (books.css .bks-inside, .bks-cf) ---- */
.bkd-inside .bks-inside-top .bkd-note{ margin-top:12px; }