/* humanfrontier.ai/book.html and /fr/livre.html : the book page (29/09/2026).
   Loaded after style.css. No JavaScript (CSP script-src 'none'), no inline style. */

/* hero */
.bk-hero.band { background: linear-gradient(180deg, var(--deep) 0%, var(--deep2) 100%); color: var(--cream); border-bottom: 4px solid var(--amber); }
.bk-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 40px 80px;
  padding-block: 56px 60px;
  align-items: center;
}
.bk-cover { position: relative; justify-self: center; width: min(330px, 78vw); }
.bk-cover img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.55), 14px 14px 0 rgba(233,168,58,.9);
  transform: rotate(-2deg);
}
.bk-cover .tag {
  position: absolute; top: -14px; right: -18px;
  background: var(--amber); color: var(--ink);
  font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 12px; transform: rotate(4deg);
}
.bk-hero-text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bk-hero .lbl { color: var(--amber); }
.bk-hero h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1; color: #FFFFFF; letter-spacing: -.01em; }
.bk-hero .sub { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-style: italic; color: #FFFFFF; max-width: 560px; }
.bk-hero .sub em { color: var(--amber); font-style: italic; }
.bk-hero .hook { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.84); max-width: 560px; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: 4px; }
.bk-hero .btn.outline { color: var(--cream); border-color: rgba(255,255,255,.55); }
.bk-hero .btn.outline:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.bk-formats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bk-formats li {
  font-size: 12px; letter-spacing: .04em; color: var(--cream);
  border: 1px solid rgba(255,255,255,.3); padding: 5px 10px;
}

/* quote */
.bk-quote .wrap { padding-block: 56px 52px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.bk-quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(26px, 3.6vw, 42px); line-height: 1.18; max-width: 880px; text-wrap: balance; }
.bk-quote blockquote b { font-weight: 500; color: var(--amber-ink); }
.bk-quote .cite { font-size: 13px; color: var(--muted); font-style: italic; }
.bk-quote .fine { max-width: 620px; font-size: 14px; }

/* shared section layout */
.bk-sec .wrap { display: flex; flex-direction: column; gap: 24px; padding-block: 44px 48px; }
.bk-sec h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; text-wrap: balance; }
.bk-sec .intro { font-size: 15.5px; line-height: 1.6; color: var(--text); max-width: 680px; }
.bk-sec.rule { border-top: 1px solid var(--rule); }

/* three promises */
.bk-promise { counter-reset: p; }
.bk-promise .card { padding-top: 16px; gap: 8px; }
.bk-promise .card::before {
  counter-increment: p; content: "0" counter(p);
  font: 500 44px/1 var(--serif); color: var(--amber);
}
.bk-promise .card h3 { font-size: 23px; }
.bk-promise .card p { font-size: 14.5px; }

/* four profiles */
.bk-profiles.band { background: var(--warm); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bk-profiles .card h3 { font-size: 21px; }
.bk-profiles .cta-row .fine { max-width: 520px; }

/* contents, in three parts */
.bk-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 48px; }
.bk-part { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bk-part h3 { color: var(--ink); font-weight: 600; padding-bottom: 4px; }
.bk-toc { list-style: none; margin: 0; padding: 0; }
.bk-toc li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule); }
.bk-toc .n { font: 500 20px/1 var(--serif); color: var(--amber-ink); }
.bk-toc .t { font: 400 19px/1.25 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.bk-toc .read { font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; background: var(--amber); color: var(--ink); padding: 5px 7px; }
.bk-toc .read:hover { background: var(--deep); color: #FFFFFF; text-decoration: none; }

/* training */
.bk-train.band { background: var(--warm); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bk-train .bk-subhead { color: var(--ink); font-weight: 600; margin-bottom: -8px; }
.bk-train .card h3 { font-size: 21px; }
.bk-train .card .fine { margin-top: auto; }
.bk-train .go, .bk-solo .go { font-weight: 600; font-size: 14px; color: var(--deep); align-self: flex-start; }
.bk-train .go::after { content: " →"; }
.bk-train .go:hover { color: var(--amber-ink); }
.bk-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.bk-solo {
  background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--deep);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.bk-solo h3 { font-size: 21px; font-weight: 500; line-height: 1.2; }
.bk-solo p { font-size: 13.5px; line-height: 1.55; color: var(--text); }

/* author */
.bk-author.band { background: var(--white); }
.bk-author .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 72px; padding-block: 44px; align-items: start; }
.bk-author h2 { font-size: 30px; line-height: 1.2; }
.bk-author p { font-size: 15px; line-height: 1.65; color: var(--text); }
.bk-author .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bk-author .note { border-left: 4px solid var(--amber); padding-left: 24px; }
.bk-author .note h3 { font-size: 24px; line-height: 1.2; color: var(--ink); }
.bk-author .note p { font-size: 14.5px; }
.bk-author .note .sig { font: italic 400 clamp(22px, 2.4vw, 28px)/1.25 var(--serif); color: var(--ink); margin-top: 4px; }

/* go further: three lines */
.bk-further.band { background: var(--deep); color: var(--cream); }
.bk-further .wrap { padding-block: 30px 32px; display: flex; flex-direction: column; gap: 12px; }
.bk-further h2 { color: var(--amber); }
.bk-further ul { list-style: none; margin: 0; padding: 0; }
.bk-further li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16);
}
.bk-further .k { font: 500 19px/1.2 var(--serif); color: #FFFFFF; }
.bk-further .d { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.8); }
.bk-further a { font-weight: 600; font-size: 14px; color: var(--amber); white-space: nowrap; }
.bk-further a::after { content: " →"; }
.bk-further a:hover { color: #FFFFFF; }

/* closing call */
.bk-close .wrap { padding-block: 52px 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.bk-close h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; max-width: 760px; text-wrap: balance; }
.bk-close .bk-actions { justify-content: center; }
.bk-soon { font-size: 13px; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--rule); padding: 10px 14px; cursor: default; }
.bk-soon:hover { color: var(--muted); text-decoration: none; }

@media (max-width: 880px) {
  .bk-hero .wrap, .bk-author .wrap { grid-template-columns: minmax(0, 1fr); }
  .bk-hero .wrap { padding-block: 44px 48px; }
  .bk-cover { width: min(250px, 70vw); }
  .bk-parts, .bk-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bk-further li { grid-template-columns: minmax(0, 1fr); }
  .bk-further a { white-space: normal; }
  .bk-author .note { padding-left: 16px; }
}
@media (max-width: 560px) {
  .bk-cover .tag { right: -6px; }
  .bk-toc .t { font-size: 17px; }
}