/* ============================================================
   book.css - scoped styles for the Book page (.bookpage)
   Future Generations Policy, Governance and Leadership.
   Maps onto site tokens; reuses .wrap/.reveal/.btn/.shead/.eyebrow.
   ============================================================ */
.bookpage section { padding: clamp(2rem, 1.5rem + 1.9vw, 3.5rem) 0; }

/* ---------- hero ---------- */
.bookpage .bk-hero { padding-top: clamp(2.4rem, 1.6rem + 4vw, 4.5rem); background: linear-gradient(180deg, var(--mist), var(--bg)); }
.bk-hero__grid { display: grid; gap: clamp(2rem, 1rem + 5vw, 4.5rem); align-items: center; }
@media (min-width: 860px) { .bk-hero__grid { grid-template-columns: minmax(260px, 360px) 1fr; } }
.bk-hero__cover { perspective: 1400px; }
.bk-hero__photo { display: block; width: 100%; max-width: 400px; margin-inline: auto; border-radius: 12px;
  box-shadow: 0 44px 76px -36px rgba(11,35,60,.55), 0 8px 20px -12px rgba(11,35,60,.4);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); }
.bk-hero__cover:hover .bk-hero__photo { transform: translateY(-6px); box-shadow: 0 56px 92px -36px rgba(11,35,60,.62); }
.bookcover__svg { display: block; width: 100%; max-width: 360px; margin-inline: auto; border-radius: 6px;
  box-shadow: 0 38px 70px -34px rgba(11,35,60,.62), 0 6px 16px -10px rgba(11,35,60,.4);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); }
.bk-hero__cover:hover .bookcover__svg { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 48px 84px -34px rgba(11,35,60,.7); }
/* cover SVG text */
.bc-tag { font-family: var(--font-mono); font-size: 17px; letter-spacing: .18em; fill: var(--teal-glow); }
.bc-title { font-family: var(--font-display); font-weight: 520; font-size: 35px; fill: #fff; }
.bc-sub { font-family: var(--font-display); font-style: italic; font-weight: 420; font-size: 29px; fill: var(--teal-glow); }
.bc-auth { font-family: var(--font-sans); font-weight: 600; font-size: 17px; fill: #fff; }
.bc-auth--dim { font-weight: 500; fill: rgba(255,255,255,.74); }
.bc-pub { font-family: var(--font-mono); font-size: 15px; letter-spacing: .04em; fill: rgba(255,255,255,.6); }

.bk-hero__tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: inline-block; padding: .45rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.bk-hero__body h1 { font-size: clamp(2rem, 1.4rem + 3.4vw, 3.3rem); line-height: 1.04; margin: 1.1rem 0 0; }
.bk-hero__sub { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem); color: var(--text-strong); margin: .4rem 0 0; }
.bk-hero__sub em { color: var(--accent); }
.bk-hero__by { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); margin: 1.1rem 0 0; line-height: 1.6; }
.bk-hero__lead { font-size: clamp(1.02rem, .96rem + .4vw, 1.18rem); line-height: 1.65; color: var(--text-body); margin: 1.4rem 0 0; max-width: 54ch; }
.bk-hero__lead strong { color: var(--accent); font-weight: 600; }
.bk-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ---------- policrastination definition card ---------- */
.bk-define { background: var(--deep-navy); }
.bk-def { max-width: 56ch; margin-inline: auto; color: #fff; text-align: left; padding-left: clamp(1rem, .4rem + 2vw, 2.2rem); border-left: 3px solid var(--teal-glow); }
.bk-def__pron { font-family: var(--font-display); font-style: italic; font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); color: #fff; display: block; }
.bk-def__pos { font-family: var(--font-mono); font-style: italic; font-size: .85rem; color: var(--teal-glow); display: block; margin-top: .3rem; }
.bk-def__meaning { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem); line-height: 1.45; color: rgba(255,255,255,.95); margin: 1.1rem 0 0; }
.bk-def__see { font-family: var(--font-mono); font-size: .78rem; color: rgba(255,255,255,.55); margin: 1.1rem 0 0; }
.bk-def__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; font-family: var(--font-sans); font-weight: 600; font-size: .92rem; color: var(--teal-glow); transition: color var(--dur-1) var(--ease); }
.bk-def__link:hover { color: #fff; }
.bk-def__link .arr { transition: transform var(--dur-1) var(--ease); }
.bk-def__link:hover .arr { transform: translateX(3px); }
.bk-def__aside { font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, .93rem + .35vw, 1.18rem); line-height: 1.55; color: rgba(255,255,255,.72); margin: 1.8rem 0 0; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); }
.bk-credit { margin-top: 1.1rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.bk-credit a { color: rgba(255,255,255,.7); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.bk-credit a:hover { color: var(--teal-glow); border-color: var(--teal-glow); }

/* ---------- narrow prose ---------- */
.bk-narrow { max-width: 64ch; }
.bk-thesis { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.3rem); line-height: 1.2; color: var(--text-strong); margin: .8rem 0 1.6rem; }
.bk-narrow p { color: var(--text-body); line-height: 1.7; margin-bottom: 1.1rem; }

/* ---------- pull-quote feature ---------- */
.bquote { margin: 0; padding: clamp(1.9rem, 1.5rem + 1.8vw, 3.3rem) var(--gutter); background: var(--bg-alt); text-align: center; }
.bquote blockquote { font-family: var(--font-display); font-weight: 420; font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.6rem); line-height: 1.28; color: var(--text-strong); max-width: 22ch; margin: 0 auto; position: relative; }
.bquote--sm blockquote { font-size: clamp(1.2rem, .95rem + 1.4vw, 1.85rem); max-width: 34ch; }
.bquote blockquote::before { content: "\201C"; font-family: var(--font-display); color: var(--accent); font-size: 1.4em; line-height: 0; vertical-align: -.35em; margin-right: .06em; }
.bquote blockquote strong { color: var(--accent); font-weight: 600; }
.bquote figcaption { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: 1.6rem; }
.bquote__lead { max-width: 46ch; margin: 0 auto 1.6rem; font-size: clamp(.95rem, .88rem + .3vw, 1.05rem); line-height: 1.55; color: var(--text-body); }
/* dark verbatim quote band (from the book) - no eyebrow, no button */
.bk-quoteband figure { margin: 0; }
.bk-quoteband blockquote { font-family: var(--font-display); font-weight: 380; font-size: clamp(1.45rem, 1.1rem + 1.9vw, 2.35rem); line-height: 1.3; color: var(--pure-white); max-width: 30ch; margin: 0 auto; }
.bk-quoteband blockquote em { font-style: italic; color: var(--on-accent-glow); }
.bk-quoteband figcaption { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-accent-glow); margin-top: 1.6rem; }

/* ---------- THE FRAMEWORK: four pillars ---------- */
.bk-frame { background: var(--bg); }
.fgp-frame { margin-top: 1rem; }
.fgp-pillars { display: grid; gap: .8rem; }
@media (min-width: 600px) { .fgp-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .fgp-pillars { grid-template-columns: repeat(4, 1fr); } }
.fgp-pillar { background: var(--mist); border: 1px solid var(--border); border-radius: 80px 80px 6px 6px; padding: 2.1rem 1.4rem 1.4rem; display: flex; flex-direction: column; position: relative; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.fgp-pillar:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 24px 40px -28px rgba(11,35,60,.5); }
.fgp-pillar__no { font-family: var(--font-mono); font-size: .8rem; color: var(--accent); display: block; text-align: center; }
.fgp-pillar__arch { display: block; width: 46px; height: 23px; margin: .6rem auto .8rem; border: 1.5px solid var(--accent); border-bottom: 0; border-radius: 46px 46px 0 0; opacity: .5; }
.fgp-pillar h3 { font-size: 1.12rem; line-height: 1.2; text-align: center; }
.fgp-pillar__def { font-size: .9rem; color: var(--text-body); line-height: 1.55; margin: .7rem 0 1rem; text-align: center; }
/* progressive disclosure: "Why it matters" expands on click */
.fgp-pillar__toggle { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 0 0; margin-top: auto; border: 0; border-top: 1px solid var(--border); background: none; cursor: pointer; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.fgp-pillar__toggle:hover { color: var(--teal-deep); }
.fgp-pillar__icon { position: relative; width: 9px; height: 9px; flex: none; }
.fgp-pillar__icon::before, .fgp-pillar__icon::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; }
.fgp-pillar__icon::before { left: 0; right: 0; top: 3.75px; height: 1.5px; }
.fgp-pillar__icon::after { top: 0; bottom: 0; left: 3.75px; width: 1.5px; transition: transform var(--dur-1) var(--ease); }
.fgp-pillar__toggle[aria-expanded="true"] .fgp-pillar__icon::after { transform: scaleY(0); }
.fgp-pillar__why { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease); }
.fgp-pillar__why > p { overflow: hidden; min-height: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin: 0; text-align: center; }
.fgp-pillar__toggle[aria-expanded="true"] + .fgp-pillar__why { grid-template-rows: 1fr; }
.fgp-pillar__toggle[aria-expanded="true"] + .fgp-pillar__why > p { padding-top: .65rem; }
/* scroll-build: columns stagger into place */
.bk-frame .reveal { transition-delay: calc(var(--i, 0) * 80ms); }

/* ---------- ecosystem: venn + three dimensions ---------- */
.bk-eco { background: var(--bg-alt); }
.bookpage .bk-eco { padding-bottom: clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem); }
.fgp-eco { display: grid; gap: clamp(1.6rem, 1rem + 3vw, 3rem); align-items: center; }
@media (min-width: 820px) { .fgp-eco { grid-template-columns: minmax(220px, 320px) 1fr; } }
.fgp-eco__viz { display: flex; justify-content: center; }
.fgp-venn { width: 100%; max-width: 320px; height: auto; }
.fgp-venn__glow { fill: url(#fgpEcoGlow); }
.fgp-venn__echo { stroke: #5BD0C4; stroke-opacity: .4; stroke-width: 1.2; }
.fgp-venn__spoke { stroke: #0B233C; stroke-opacity: .18; stroke-width: 1; }
.fgp-venn__halo { fill: none; stroke-opacity: .32; stroke-width: 1.4; transition: stroke-opacity var(--dur-2) var(--ease), r var(--dur-2) var(--ease); }
.fgp-venn__halo.is-active { stroke-opacity: .75; r: 16; }
.fgp-venn__edge { fill: none; stroke-width: 3.6; stroke-linecap: round; opacity: 0; transition: opacity var(--dur-2) var(--ease); pointer-events: none; }
.fgp-venn__edge.is-active { opacity: 1; }
.fgp-venn__edge[data-edge="0"].is-active { filter: drop-shadow(0 0 6px #00877D); }
.fgp-venn__edge[data-edge="1"].is-active { filter: drop-shadow(0 0 6px #2AA89B); }
.fgp-venn__edge[data-edge="2"].is-active { filter: drop-shadow(0 0 6px #5BD0C4); }
.fgp-dims { display: grid; gap: 1rem; }
.fgp-dim { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 1.2rem 1.3rem; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-left-color var(--dur-2) var(--ease); }
.fgp-dim:hover, .fgp-dim:focus-within { transform: translateX(6px); border-left-color: var(--dc, var(--accent)); box-shadow: 0 10px 28px -16px rgba(11,35,60,.28); }
.fgp-dim__no { font-family: var(--font-mono); font-size: .72rem; color: var(--accent); transition: color var(--dur-2) var(--ease); }
.fgp-dim:hover .fgp-dim__no, .fgp-dim:focus-within .fgp-dim__no { color: var(--dc, var(--accent)); }
.fgp-dim h3 { font-size: 1.1rem; margin: .25rem 0 .4rem; }
.fgp-dim p { font-size: .9rem; color: var(--text-body); line-height: 1.55; }
.fgp-eco__note { max-width: 70ch; margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) auto 0; text-align: center; font-family: var(--font-display); font-size: clamp(1rem, .9rem + .6vw, 1.2rem); line-height: 1.5; color: var(--text-strong); }

/* adapted-figure source captions (framework + ecosystem) */
.fgp-source { max-width: 74ch; margin: clamp(1.4rem, 1rem + 1.5vw, 2rem) auto 0; text-align: center; font-size: .78rem; line-height: 1.55; color: var(--text-muted); }
.fgp-source cite { font-style: italic; }

/* ---------- roadmap ---------- */
.fgp-road { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: none; position: relative; }
@media (min-width: 760px) { .fgp-road { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }
.fgp-step { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--border); }
.fgp-step__dot { position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.fgp-step__yr { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; color: var(--accent); }
.fgp-step h3 { font-size: 1.15rem; margin: .25rem 0 .5rem; }
.fgp-step p { font-size: .92rem; color: var(--text-body); line-height: 1.6; }
.fgp-road__end { margin-top: 1.8rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); color: var(--accent); }

/* ---------- chapters index ---------- */
.bk-inside { background: var(--bg-alt); }
.bookpage .bk-inside { padding-top: clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem); }
.fgp-chaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 760px) { .fgp-chaps { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 1rem + 3vw, 4rem); } }
.fgp-chap { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--border); }
.fgp-chap__no { font-family: var(--font-mono); font-size: .8rem; color: var(--accent); }
.fgp-chap p { font-size: .96rem; color: var(--text-body); line-height: 1.5; }

/* ---------- authors ---------- */
.fgp-authors { display: grid; gap: 1rem; }
@media (min-width: 620px) { .fgp-authors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .fgp-authors { grid-template-columns: repeat(3, 1fr); } }
.fgp-author { border-top: 2px solid var(--accent); padding-top: 1rem; }
.fgp-author h3 { font-size: 1.1rem; }
.fgp-author p { font-size: .88rem; color: var(--text-muted); margin-top: .3rem; line-height: 1.5; }
.fgp-author__lead { display: inline-block; margin-top: .6rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .2rem .6rem; }
.bk-publisher { max-width: 72ch; margin: clamp(1.4rem, 1rem + 1.6vw, 2rem) 0 0; padding-top: 1.4rem; border-top: 1px solid var(--border); font-size: .82rem; line-height: 1.6; color: var(--text-muted); }

/* authors -> endorsements -> details are all on white: tighten the doubled
   padding so the run reads as one connected thread rather than three voids
   (.bookpage prefix so these beat the .bookpage section base rule) */
.bookpage .bk-authors { padding-bottom: clamp(1.2rem, .9rem + 1vw, 1.9rem); }
.bookpage .bk-endorse { padding-block: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); }
.bookpage .bk-meta { padding-top: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); }

/* meta details reuse .bk-details / .bk-detail from site.css */
.bk-meta .bk-details { margin-inline: auto; }

/* argument: two-column so it fills the width (no narrow wasted column) */
.bk-argument { display: grid; gap: clamp(1.4rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 820px) { .bk-argument { grid-template-columns: 1fr 1fr; } }
.bk-argument__lead .bk-thesis { margin: .5rem 0 0; }
.bk-argument__body p { color: var(--text-body); line-height: 1.72; font-size: 1.05rem; }
.bk-argument__body p + p { margin-top: 1.1rem; }

/* endorsements */
.bk-endorse__grid { display: grid; gap: clamp(1.2rem, 1rem + 1.6vw, 1.8rem); }
@media (min-width: 860px) { .bk-endorse__grid { grid-template-columns: repeat(3, 1fr); } }
.bk-endorse__card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); }
.bk-endorse__card blockquote { margin: 0; font-size: .98rem; line-height: 1.62; color: var(--text-strong); }
.bk-endorse__card blockquote strong { color: var(--accent); font-weight: 700; }
.bk-endorse__card figcaption { margin-top: auto; padding-top: 1.1rem; }
.bk-endorse__card blockquote + figcaption { margin-top: 1.3rem; border-top: 1px solid var(--border); }
.bk-endorse__name { display: block; font-family: var(--font-display); font-size: 1.08rem; color: var(--text-strong); line-height: 1.2; }
.bk-endorse__role { display: block; margin-top: .35rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); line-height: 1.55; }