/* =====================================================================
   nielsdalgaard.com — /assets/book-page.css

   The layout a book page uses, once.

   The four older book pages each carry their own ~270 lines of inline
   <style>, which is how they came to differ from one another in small
   ways nobody chose. The two newest share this file instead. Each page
   sets one variable — --accent — and gets the rest.

   Not retrofitted onto the older four: they have bespoke sections this
   does not cover, and rewriting working pages to prove a point is not
   worth the risk of breaking them. This is for what comes next.

   Loads after analyzer.css, which supplies the palette, the nav, the
   footer and .btn.
   ===================================================================== */

:root{ --accent:#b9b4aa; }

/* ------------------------------------------------------------- hero */

.bp-hero{padding:64px 0 30px;position:relative;overflow:hidden}
.bp-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(680px 320px at 18% 0%,rgba(255,255,255,.05),transparent 70%)}
.bp-hero>.wrap{position:relative;z-index:1}

.bp-grid{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:center}
.bp-kicker{font-family:'Oswald',sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}

.bp-title{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;font-size:clamp(34px,5.4vw,58px);line-height:1.04;margin-bottom:14px}
.bp-sub{font-family:'Oswald',sans-serif;font-weight:400;letter-spacing:1.2px;
  font-size:clamp(14px,1.7vw,17px);text-transform:uppercase;color:var(--accent);
  margin-bottom:22px;line-height:1.45}
.bp-lede{color:#d6d2ca;font-size:16.5px;line-height:1.65;max-width:62ch}

.bp-cover{width:100%;height:auto;border-radius:8px;display:block;
  box-shadow:0 22px 60px rgba(0,0,0,.55);border:1px solid var(--line)}

.bp-facts{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 30px}
.bp-fact{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);
  border-radius:999px;padding:7px 14px}
.bp-fact b{color:var(--cream);font-weight:600}

.bp-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* --------------------------------------------------------- sections */

.bp-sec{padding:64px 0;border-top:1px solid var(--line)}
.bp-sec.alt{background:var(--bg2)}
.bp-head{margin-bottom:32px}
.bp-head .k{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.bp-head h2{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;font-size:clamp(23px,3.2vw,34px);line-height:1.15}
.bp-sec p{color:#d6d2ca;font-size:16px;line-height:1.7;max-width:70ch;margin-bottom:16px}
.bp-sec p b,.bp-sec p strong{color:var(--cream);font-weight:600}

/* the four questions / any list of paired ideas */
.bp-qs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.bp-q{background:linear-gradient(180deg,var(--panel),#111113);border:1px solid var(--line);
  border-radius:12px;padding:20px 22px}
.bp-q h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.bp-q p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;max-width:none}

/* the stage / part table */
.bp-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:15px}
.bp-table th{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:1.8px;font-size:10.5px;color:var(--muted2);text-align:left;
  padding:12px 14px;border-bottom:1px solid var(--line-strong)}
.bp-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;
  color:#d6d2ca;line-height:1.55}
.bp-table td.n{font-family:'Oswald',sans-serif;color:var(--accent);white-space:nowrap;
  font-weight:600;letter-spacing:.5px;width:1%}
.bp-table td.t{color:var(--cream);font-weight:500;white-space:nowrap}
.bp-table tr:last-child td{border-bottom:0}
.bp-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}

/* what it is not */
.bp-limits{border-left:2px solid var(--accent);padding-left:24px;margin-top:24px}
.bp-limits p{margin-bottom:12px}

/* The series strip moved to /assets/series.css when the free tools
   started using it too — a tool page should not have to load a book
   page's layout to get one grid. Book pages load both files; the
   accent below is what keeps the strip in each book's own colour. */
.bp-book.here{border-color:var(--accent);background:var(--panel2)}
.bp-book.here .bn{color:var(--accent)}
a.bp-book:hover{border-color:var(--accent)}

/* closing call */
.bp-final{padding:76px 0;text-align:center;border-top:1px solid var(--line)}
.bp-final h2{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;font-size:clamp(24px,3.4vw,36px);margin-bottom:16px}
.bp-final p{color:var(--muted);max-width:56ch;margin:0 auto 28px;line-height:1.7}

/* ------------------------------------------------------------ small */

@media (max-width:900px){
  .bp-grid{grid-template-columns:1fr;gap:34px}
  .bp-cover-wrap{max-width:230px}
  .bp-qs{grid-template-columns:1fr}
  .bp-sec{padding:48px 0}
}