/* The section pages in the home page's style (12 October 2026).
 *
 * What we do, Decisions, How we work, Analysis, Tools and About share these
 * components with the home page's look, and since the evening of 12 October
 * so does every other page type (the analysis series and parts, decisions,
 * practices, resources, the framework library, the plain pages, 404 and
 * search), through inc/page-bands.php in the plugin: a photograph hero, full-bleed bands
 * that alternate dark and light on one 1180px grid, large headings with the
 * introduction beside them, photograph cards, numbered steps, list rows and
 * a dark closing band that starts a diagnosis. Everything is scoped to .bpx,
 * the wrapper the section templates put round the page body, so nothing here
 * can reach a page that has not asked for it.
 *
 * Colour rules are the theme's: on ink, white, #C3C7D0 (10.87:1), sky
 * (10.47:1) and bright (6.31:1); on paper, accent is the only blue that
 * carries text. A photograph only ever sits behind words through a gradient
 * that is solid ink where the words are. */

.bpx{
	--w:1180px;--g:clamp(20px,5vw,64px);
	--pi:max(var(--g),calc((100% - var(--w)) / 2));
	--panel:#191C23;--edge:#262A33;--dim:#8E95A3;--soft:#C3C7D0}
/* Only the page body directly inside the wrapper: a page that keeps its old
   reading column (a plain page, a resource) has its own post content further
   down, and that keeps its own measure and spacing. */
.bpx>.entry-content,.bpx>.wp-block-post-content{max-width:none}
.bpx>.wp-block-post-content>*,.bpx>*{margin-block:0}
.bpx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons ---------------------------------------------------------------- */
.bpx .bx-btns{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.bpx .bx-btn{display:inline-block;font-size:var(--fs-sm);font-weight:600;padding:14px 26px;border:1px solid transparent;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.bpx .bx-btn:hover{text-decoration:none}
.bpx .bx-btn.fill{background:var(--accent);color:#FFFFFF}
.bpx .bx-btn.fill:hover{background:var(--accent-deep)}
.bpx .bx-btn.line{border-color:var(--rule-2);color:var(--ink)}
.bpx .bx-btn.line:hover{border-color:var(--ink)}
.bpx .bx-hero .bx-btn.fill,.bpx .bx-dark .bx-btn.fill,.bpx .bx-cta .bx-btn.fill{background:var(--bright);color:var(--ink)}
.bpx .bx-hero .bx-btn.fill:hover,.bpx .bx-dark .bx-btn.fill:hover,.bpx .bx-cta .bx-btn.fill:hover{background:var(--sky)}
.bpx .bx-hero .bx-btn.line,.bpx .bx-dark .bx-btn.line,.bpx .bx-cta .bx-btn.line{border-color:#4A515F;color:#FFFFFF}
.bpx .bx-hero .bx-btn.line:hover,.bpx .bx-dark .bx-btn.line:hover,.bpx .bx-cta .bx-btn.line:hover{border-color:#FFFFFF}

/* The hero: a photograph, darkened only behind the words ----------------- */
.bpx .bx-hero{position:relative;isolation:isolate;overflow:hidden;background:#0E1A33;color:#FFFFFF;
	min-height:clamp(440px,64vh,660px);display:flex;align-items:flex-end;
	padding:clamp(72px,9vw,128px) var(--pi) clamp(48px,6vw,84px)}
.bpx .bx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2;max-width:none}
.bpx .bx-hero::before{content:"";position:absolute;inset:0;z-index:-1;
	background:
		linear-gradient(90deg,rgba(18,20,26,.95) 0%,rgba(18,20,26,.86) 34%,rgba(18,20,26,.42) 60%,rgba(18,20,26,.05) 82%),
		linear-gradient(0deg,rgba(18,20,26,.7) 0%,rgba(18,20,26,0) 40%)}
.bpx .bx-hero-in{position:relative;max-width:46rem}
.bpx .bx-k{margin:0 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.bpx .bx-hero h1{margin:0 0 22px;color:#FFFFFF;font-size:clamp(2.5rem,5.4vw,4.4rem);letter-spacing:-.045em;line-height:1.01;max-width:18ch;text-wrap:balance}
.bpx .bx-hero .bx-lede{margin:0 0 30px;color:var(--soft);font-size:var(--fs-md);line-height:1.55;max-width:42rem}
.bpx .bx-hero .bx-lede:last-child{margin-bottom:0}
@media(max-width:760px){
	.bpx .bx-hero{min-height:0;padding-top:clamp(160px,42vw,240px)}
	.bpx .bx-hero-img{object-position:60% 20%}
	.bpx .bx-hero::before{background:linear-gradient(0deg,rgba(18,20,26,.97) 0%,rgba(18,20,26,.9) 52%,rgba(18,20,26,.35) 82%,rgba(18,20,26,.1) 100%)}
	.bpx .bx-hero h1{font-size:clamp(2rem,8.4vw,2.8rem)}
	.bpx .bx-hero .bx-lede{font-size:var(--fs-base)}
	.bpx .bx-hero .bx-btn{flex:1 1 100%;text-align:center}
}

/* Bands ------------------------------------------------------------------ */
.bpx .bx-sec{padding:clamp(64px,8vw,112px) var(--pi);border-top:1px solid var(--rule)}
.bpx .bx-hero+.bx-sec,.bpx .bx-dark,.bpx .bx-dark+.bx-sec{border-top:0}
.bpx .bx-alt{background:var(--surface-2)}
.bpx .bx-dark{background:var(--ink);color:#FFFFFF}
.bpx .bx-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px clamp(24px,4vw,64px);align-items:end;margin:0 0 clamp(32px,4vw,52px)}
.bpx .bx-head h2{margin:0;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1.02;color:var(--ink);max-width:none}
.bpx .bx-head p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2);max-width:32rem}
.bpx .bx-dark .bx-head h2{color:#FFFFFF}
.bpx .bx-dark .bx-head p{color:var(--soft)}
@media(max-width:860px){.bpx .bx-head{grid-template-columns:minmax(0,1fr)}}

/* Photograph cards (the home page's series covers, in a grid) ------------ */
.bpx .bx-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bpx .bx-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bpx .bx-card{margin:0}
.bpx .bx-card>a,.bpx .bx-card>div{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--edge);color:#FFFFFF;text-decoration:none;transition:border-color .2s}
.bpx .bx-card>a:hover{border-color:var(--sky);text-decoration:none}
.bpx .bx-card-img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#1B2A44}
.bpx .bx-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);max-width:none}
.bpx .bx-card>a:hover .bx-card-img img{transform:scale(1.04)}
.bpx .bx-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(25,28,35,1) 0%,rgba(25,28,35,.78) 30%,rgba(25,28,35,0) 64%)}
.bpx .bx-card-t{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0 22px 16px;font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.1;letter-spacing:-.03em;color:#FFFFFF}
.bpx .bx-card-t .q{display:block;color:var(--sky);font-size:.92em}
.bpx .bx-card-k{display:block;margin:0 0 8px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
.bpx .bx-card-b{display:block;padding:16px 22px 0;font-size:var(--fs-sm);line-height:1.55;color:var(--soft)}
.bpx .bx-card-m{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding:18px 22px 20px;font-size:var(--fs-xs);color:var(--dim)}
.bpx .bx-card-m{align-items:baseline}
.bpx .bx-card-m .go{color:var(--sky);font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
.bpx .bx-card .mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em}
@media(max-width:980px){.bpx .bx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bpx .bx-cards,.bpx .bx-cards.two{grid-template-columns:minmax(0,1fr)}}

/* Steps: numbered columns under an accent rule -------------------------- */
.bpx .bx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(18px,2.6vw,36px)}
.bpx .bx-steps li{border-top:2px solid var(--accent);padding-top:18px}
.bpx .bx-steps .n{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent)}
.bpx .bx-steps h3{margin:0 0 10px;font-size:var(--fs-lg);letter-spacing:-.025em;color:var(--ink)}
.bpx .bx-steps p:not(.n){margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2)}
.bpx .bx-dark .bx-steps li{border-top-color:var(--sky)}
.bpx .bx-dark .bx-steps .n{color:var(--sky)}
.bpx .bx-dark .bx-steps h3{color:#FFFFFF}
.bpx .bx-dark .bx-steps p:not(.n){color:var(--soft)}
.bpx .bx-after{margin:clamp(28px,3.5vw,44px) 0 0;max-width:var(--col);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-2)}
.bpx .bx-dark .bx-after{color:var(--soft)}

/* Rows: a label, a title with its description, and a note ---------------- */
.bpx .bx-rows{border-top:2px solid var(--ink)}
.bpx .bx-row{display:grid;grid-template-columns:10rem minmax(0,1fr) 12rem;gap:8px 28px;padding:24px 0;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;transition:background .15s}
.bpx a.bx-row:hover{text-decoration:none}
.bpx a.bx-row:hover .h{color:var(--accent)}
.bpx .bx-row .t{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-top:.5rem}
.bpx .bx-row .h{display:block;font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.65rem);letter-spacing:-.03em;line-height:1.15;color:var(--ink);transition:color .15s}
.bpx .bx-row .d{display:block;margin:8px 0 0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2);max-width:44rem}
.bpx .bx-row .m{font-size:var(--fs-xs);color:var(--ink-3);padding-top:.5rem;text-align:right}
.bpx .bx-row .go{display:inline-block;margin-top:10px;font-size:var(--fs-sm);font-weight:600;color:var(--accent)}
.bpx .bx-dark .bx-rows{border-top-color:#FFFFFF}
.bpx .bx-dark .bx-row{border-bottom-color:var(--edge)}
.bpx .bx-dark .bx-row .t{color:var(--sky)}
.bpx .bx-dark .bx-row .h{color:#FFFFFF}
.bpx .bx-dark a.bx-row:hover .h{color:var(--sky)}
.bpx .bx-dark .bx-row .d{color:var(--soft)}
.bpx .bx-dark .bx-row .m{color:var(--dim)}
@media(max-width:760px){
	.bpx .bx-row{grid-template-columns:minmax(0,1fr);gap:6px}
	.bpx .bx-row .t,.bpx .bx-row .m{padding-top:0;text-align:left}
}

/* Editorial: a heading on the left, prose on the right ------------------- */
.bpx .bx-ed{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:18px clamp(28px,5vw,80px);padding:clamp(28px,3.5vw,44px) 0;border-top:1px solid var(--rule)}
.bpx .bx-ed:first-of-type{border-top:2px solid var(--ink)}
.bpx .bx-ed h2{margin:0;font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.035em;line-height:1.08;color:var(--ink);max-width:none}
.bpx .bx-ed .bx-prose p{margin:0 0 1em;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-2);max-width:none}
.bpx .bx-ed .bx-prose p:last-child{margin-bottom:0}
.bpx .bx-ed a,.bpx .bx-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.bpx .bx-dark .bx-ed{border-top-color:var(--edge)}
.bpx .bx-dark .bx-ed:first-of-type{border-top-color:#FFFFFF}
.bpx .bx-dark .bx-ed h2{color:#FFFFFF}
.bpx .bx-dark .bx-ed .bx-prose p{color:var(--soft)}
.bpx .bx-dark .bx-ed a{color:var(--sky)}
@media(max-width:860px){.bpx .bx-ed{grid-template-columns:minmax(0,1fr)}}

/* Panels: a two-by-two of large dark panels ------------------------------ */
.bpx .bx-panels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bpx .bx-panel{background:var(--panel);border:1px solid var(--edge);padding:clamp(22px,3vw,34px);color:#FFFFFF}
.bpx .bx-panel .n{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--sky)}
.bpx .bx-panel h3{margin:0 0 12px;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.035em;color:#FFFFFF}
.bpx .bx-panel p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--soft)}
.bpx .bx-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:22px 0 0;background:var(--edge);border:1px solid var(--edge)}
.bpx .bx-split>div{background:#14171D;padding:14px 16px}
.bpx .bx-split .h{margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.bpx .bx-split>div:last-child .h{color:var(--sky)}
.bpx .bx-split p:not(.h){color:#FFFFFF}
@media(max-width:860px){.bpx .bx-panels{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.bpx .bx-split{grid-template-columns:minmax(0,1fr)}}

/* Classes of evidence: four tiles --------------------------------------- */
.bpx .bx-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bpx .bx-tile{background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--c,var(--accent));padding:20px 20px 22px}
.bpx .bx-tile .tag{display:inline-block;margin:0 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c,var(--accent))}
.bpx .bx-tile p:not(.tag){margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2)}
.bpx .bx-note{margin:22px 0 0;padding:18px 22px;background:var(--ink);color:#FFFFFF;font-size:var(--fs-base);display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.bpx .bx-note b{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
@media(max-width:980px){.bpx .bx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.bpx .bx-tiles{grid-template-columns:minmax(0,1fr)}}

/* A numbered list in display type --------------------------------------- */
.bpx .bx-big{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);counter-reset:bx}
.bpx .bx-big li{counter-increment:bx;display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:12px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule);font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.bpx .bx-big li::before{content:counter(bx,decimal-leading-zero);font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.06em;color:var(--ink-3)}

/* The closing band ------------------------------------------------------- */
.bpx .bx-cta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(28px,4vw,64px);align-items:end;background:var(--ink);color:#FFFFFF;padding:clamp(64px,8vw,112px) var(--pi);border-top:0}
.bpx .bx-cta h2{margin:0 0 18px;color:#FFFFFF;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1.02;max-width:none}
.bpx .bx-cta p{margin:0;color:var(--soft);font-size:var(--fs-base);line-height:var(--lh-body);max-width:36rem}
.bpx .bx-cta .bx-btns{justify-content:flex-end}
@media(max-width:860px){.bpx .bx-cta{grid-template-columns:minmax(0,1fr)}.bpx .bx-cta .bx-btns{justify-content:flex-start}}

/* Blocks that keep their own markup inside a band ----------------------- */
.bpx .bx-sec .blueprysm-page{max-width:none}
.bpx [data-blueprysm-hub]{padding-bottom:0}

@media print{
	.bpx .bx-hero,.bpx .bx-dark,.bpx .bx-cta{background:none;color:var(--ink)}
	.bpx .bx-hero-img,.bpx .bx-hero::before,.bpx .bx-card-img{display:none}
	.bpx .bx-hero h1,.bpx .bx-cta h2,.bpx .bx-dark .bx-head h2{color:var(--ink)}
}

/* The series still being written keeps its drawn cover. */
.bpx .bx-card-soon>div{background:var(--panel)}
.bpx .bx-card-soon .scover{aspect-ratio:16/10;height:auto}
.bpx .bx-card-soon .scover-svg{opacity:.45}


/* ==========================================================================
   Every other page type (12 October 2026, evening)
   ========================================================================== */

/* Hero variants. Pages with a lede and facts in the hero carry more words
   over the photograph than the section pages do, so their gradient holds
   near-solid ink across the whole text column before it fades. */
.bpx .bx-hero[class*="bx-hero--"]:not(.bx-hero--drawn)::before{
	background:
		linear-gradient(90deg,rgba(18,20,26,.95) 0%,rgba(18,20,26,.9) 44%,rgba(18,20,26,.62) 64%,rgba(18,20,26,.12) 88%),
		linear-gradient(0deg,rgba(18,20,26,.72) 0%,rgba(18,20,26,0) 42%)}
@media(max-width:760px){
	.bpx .bx-hero[class*="bx-hero--"]:not(.bx-hero--drawn)::before{background:linear-gradient(0deg,rgba(18,20,26,.97) 0%,rgba(18,20,26,.92) 56%,rgba(18,20,26,.4) 84%,rgba(18,20,26,.12) 100%)}
}
 A compact hero for pages that are mostly what follows it;
   a drawn one, ink with a faint grid and a glow of the brand blue, for pages
   with no photograph of their own (the plain pages, 404, search). */
.bpx .bx-hero--compact{min-height:clamp(300px,44vh,460px)}
.bpx .bx-hero--drawn{min-height:clamp(260px,36vh,400px);
	background:
		radial-gradient(ellipse 55% 95% at 88% 0%,rgba(0,93,214,.42),rgba(0,93,214,0) 62%),
		radial-gradient(ellipse 35% 60% at 100% 100%,rgba(0,156,255,.16),rgba(0,156,255,0) 70%),
		var(--ink)}
.bpx .bx-hero--drawn::before{
	background:
		linear-gradient(rgba(88,209,252,.07) 1px,transparent 1px) 0 0/48px 48px,
		linear-gradient(90deg,rgba(88,209,252,.07) 1px,transparent 1px) 0 0/48px 48px;
	-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 35%,#000 75%);
	mask-image:linear-gradient(90deg,transparent 0%,transparent 35%,#000 75%)}
.bpx .bx-hero--series,.bpx .bx-hero--analysis{min-height:clamp(480px,70vh,720px)}
.bpx .bx-hero--analysis h1,.bpx .bx-hero--decision h1{max-width:20ch}
@media(max-width:760px){
	.bpx .bx-hero--series,.bpx .bx-hero--analysis,.bpx .bx-hero--compact{min-height:0}
	.bpx .bx-hero--drawn{min-height:0;padding-top:clamp(56px,14vw,96px)}
}
.bpx .bx-hero--framework h1,.bpx .bx-hero--resource h1{max-width:22ch}
.bpx .bx-hero .bx-k a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(88,209,252,.45)}
.bpx .bx-hero .bx-k a:hover{border-bottom-color:var(--sky)}
.bpx .bx-hero .bx-lede a{color:var(--sky);text-decoration:underline;text-underline-offset:2px}
.bpx .bx-hero .bx-lede b,.bpx .bx-hero .bx-lede strong{color:#FFFFFF;font-weight:600}
.bpx .bx-hero h1.wp-block-post-title,.bpx .bx-hero h1.wp-block-query-title{margin:0;max-width:20ch}
.bpx .bx-hero .bx-k+h1.wp-block-query-title{margin-bottom:26px}
.bpx .bx-hero-note{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}

/* What a series answers, under its lede. */
.bpx .bx-learn{margin:-12px 0 30px;padding:0 0 0 1.5rem;max-width:42rem;color:var(--soft);font-size:var(--fs-sm);line-height:1.5}
.bpx .bx-learn li{margin:0 0 .35rem;padding-left:.2rem}
.bpx .bx-learn li::marker{font-family:var(--mono);font-size:11px;color:var(--sky)}
.bpx .bx-btns .bx-btn-m{align-self:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim)}
.bpx .bx-hero .bx-btns .bx-btn-m{color:#A9AFBC}

/* A resource's download, on the hero. */
.bpx .bx-hero .rdl{margin:0;padding:0;background:none;border-radius:0}
.bpx .bx-hero .rdl .free{color:var(--soft);flex:1 1 16rem}
.bpx .bx-hero a.dl{background:var(--bright);color:var(--ink)}
.bpx .bx-hero a.dl:hover{background:var(--sky)}

/* A framework's facts, on the hero. */
.bpx .bx-hero .bpf-meta{margin:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:0;color:#FFFFFF;font-size:var(--fs-xs);gap:10px 28px}
.bpx .bx-hero .bpf-meta b{color:var(--sky)}
.bpx .bx-hero .bpf-meta a{color:#FFFFFF;text-decoration:underline;text-underline-offset:2px}
.bpx .bx-hero .bpf-meta a:hover{color:var(--sky)}

/* The body of a page that keeps its reading column, under the hero. */
.bpx>.wp-block-post-content>.blueprysm-page,.bpx>.blueprysm-page{background:var(--ground,#F6F5F2)}
.bpx .page-analysis .analysis>.abanner:first-child{margin-top:0}
.bpx .page-plain .pad>.wp-block-post-content>.lede:first-child,
.bpx .page-plain .wp-block-post-content>p.lede:first-child{margin-top:0}

/* The closing band can carry a label. */
.bpx .bx-cta .bx-k{margin:0 0 14px}

/* Two columns: a list with its heading, and the side panels. */
.bpx .bx-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start}
.bpx .bx-h2{margin:0 0 clamp(20px,2.6vw,32px);font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1.02;color:var(--ink);max-width:none}
.bpx .bx-checks{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.bpx .bx-checks li{position:relative;margin:0;padding:16px 0 16px 30px;border-bottom:1px solid var(--rule);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink)}
.bpx .bx-checks li::before{content:"";position:absolute;left:0;top:calc(16px + .75em);width:14px;height:2px;background:var(--accent)}
.bpx .bx-checks a{color:var(--ink);text-decoration:none}
.bpx .bx-checks a:hover{color:var(--accent);text-decoration:underline}
.bpx .bx-asides{display:grid;gap:16px}
.bpx .bx-aside{background:var(--surface,#FFFFFF);border:1px solid var(--rule);border-top:3px solid var(--accent);padding:22px 24px}
.bpx .bx-aside-k{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.bpx .bx-aside h3{margin:0 0 8px;font-size:var(--fs-lg);letter-spacing:-.025em;color:var(--ink)}
.bpx .bx-aside p{margin:0 0 14px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2);max-width:none}
.bpx .bx-aside p:last-child{margin-bottom:0}
.bpx .bx-aside .rlist{margin:0;padding:0 0 0 1.1rem;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2)}
.bpx .bx-aside .rlist li{margin:0 0 .45rem}
.bpx .bx-aside .rlist a{font-weight:600}
.bpx .bx-aside .fmt{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.bpx .bx-aside .dfree{margin:12px 0 0;font-size:var(--fs-xs);color:var(--ink-3)}
.bpx .bx-go{font-weight:600;font-size:var(--fs-sm);color:var(--accent);text-decoration:none}
.bpx .bx-go:hover{text-decoration:underline}
@media(max-width:860px){.bpx .bx-cols{grid-template-columns:minmax(0,1fr)}}

/* A finding, its figures set large. */
.bpx .bx-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.bpx .bx-fig{background:var(--surface,#FFFFFF);padding:24px 24px 26px}
.bpx .bx-fig .v{margin:0 0 10px;font-family:var(--display);font-weight:600;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.04em;line-height:1;color:var(--accent)}
.bpx .bx-fig .l{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2)}
.bpx .bx-rc{margin:18px 0 0;font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-3);max-width:none}
.bpx .bx-rc a{color:var(--accent)}

/* The work you can check, set large on ink. */
.bpx .bx-big-p{margin:0;max-width:52rem;font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.5;color:#FFFFFF}
.bpx .bx-big-p a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}
.bpx .bx-big-p a:hover{color:#FFFFFF}

/* A series' parts: the question and the finding under each title. */
.bpx .bx-row .q{display:block;margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink-3)}
.bpx .bx-parts .d b,.bpx .bx-parts .d strong{color:var(--ink);font-weight:600}
.bpx .bx-parts .bx-row{grid-template-columns:7rem minmax(0,1fr) 14rem}
@media(max-width:760px){.bpx .bx-parts .bx-row{grid-template-columns:minmax(0,1fr)}}

/* The analysis index: each series on its photograph, alternating sides. */
.bpx .bx-stories{list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,7vw,104px)}
.bpx .bx-story{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4.5vw,72px);align-items:center;scroll-margin-top:5rem}
.bpx .bx-story.flip .bx-story-img{order:2}
.bpx .bx-story-img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#1B2A44}
.bpx .bx-story-img img{width:100%;height:100%;object-fit:cover;display:block;max-width:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bpx .bx-story-img:hover img{transform:scale(1.03)}
.bpx .bx-story-k{margin:0 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.bpx .bx-story h2,.bpx .bx-story h3{margin:0 0 16px;font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:-.04em;line-height:1.04;max-width:none}
.bpx .bx-story h2 a,.bpx .bx-story h3 a{color:var(--ink);text-decoration:none}
.bpx .bx-story h2 a:hover,.bpx .bx-story h3 a:hover{color:var(--accent)}
.bpx .bx-story-in>p:not(.bx-story-k):not(.bx-story-go){margin:0 0 24px;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-2);max-width:none}
.bpx .bx-story-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0}
.bpx .bx-story-m{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
@media(max-width:860px){.bpx .bx-story{grid-template-columns:minmax(0,1fr)}.bpx .bx-story.flip .bx-story-img{order:0}}

/* The cost tool in its band. On a phone the licence-type switch wraps
   rather than pushing the page sideways, which it did before this too. */
.bpx .bx-toolband .blueprysm-tool>.tsec:first-child{padding-top:0}
@media(max-width:600px){
	.bpx .bx-toolband .blueprysm-tool .seg{flex-wrap:wrap}
	.bpx .bx-toolband .blueprysm-tool .seg button{flex:1 1 auto;white-space:normal}
}

/* Search, on the hero and in a band. */
.bpx .bx-search{max-width:36rem}
.bpx .bx-hero .bx-search{margin:0}
.bpx .bx-search .wp-block-search__inside-wrapper{display:flex;gap:0;border:0}
.bpx .bx-search .wp-block-search__input{flex:1;min-width:0;padding:13px 14px;font:inherit;font-size:var(--fs-sm);border:1px solid var(--rule-2);background:var(--surface,#FFFFFF);color:var(--ink);border-radius:0}
.bpx .bx-search .wp-block-search__button{margin:0;padding:13px 22px;border:0;border-radius:0;background:var(--accent);color:#FFFFFF;font-weight:600;font-size:var(--fs-sm);cursor:pointer}
.bpx .bx-hero .bx-search .wp-block-search__input{border-color:#4A515F;background:rgba(255,255,255,.06);color:#FFFFFF}
.bpx .bx-hero .bx-search .wp-block-search__input::placeholder{color:#A9AFBC}
.bpx .bx-hero .bx-search .wp-block-search__button{background:var(--bright);color:var(--ink)}
.bpx .bx-sec>.bx-search{margin-top:clamp(36px,4vw,52px)}
.bpx .bx-results .wp-block-post-template{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);max-width:52rem}
.bpx .bx-result{padding:22px 0;border-bottom:1px solid var(--rule)}
.bpx .bx-result .wp-block-post-title{margin:0 0 6px;font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.03em;line-height:1.15}
.bpx .bx-result .wp-block-post-title a{color:var(--ink);text-decoration:none}
.bpx .bx-result .wp-block-post-title a:hover{color:var(--accent)}
.bpx .bx-result .wp-block-post-excerpt{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.bpx .bx-result .wp-block-post-excerpt p{margin:0;max-width:none}
.bpx .bx-results .wp-block-query-pagination{margin-top:28px;gap:14px;font-size:var(--fs-sm)}

@media print{
	.bpx .bx-story-img{display:none}
}
.bpx .bx-hero .bx-k{text-wrap:balance}
/* A framework workbench's tables scroll inside their own box on a phone, but
   the screen-reader labels in their header cells are absolutely positioned
   and, with no positioned ancestor, escaped that box and widened the page.
   Positioning the box keeps them inside it. */
.bpx .bpf-scroll{position:relative}
/* A workbench's worked result ("Excluded: below the quality minimum") was
   set on one line and ran off a phone screen; it wraps now. */
.bpx .bpf-calc{white-space:normal}
/* A link in running text is underlined on every page, as on the home page,
   so it does not rely on colour alone to stand out from the words round it. */
.bpx p a:not([class]),.bpx .abody li a:not([class]){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}