/*
 * Page-type components (E4) — decision, service, tools hub, method.
 * Ported from docs/04-design/prototypes/three-page-types.html.
 * Everything is scoped under .blueprysm-page so the generic class names
 * (.panel, .finding, .row, .chip, .step) never collide with core/other blocks.
 */
.blueprysm-page{
  --bg:#F6F5F2;--panel:#FFFFFF;--grid:#DCDAD3;--edge:#C9C6BD;
  --ink:#12141A;--ink2:#565B66;--ink3:#5F6472;
  --signal:#005DD6;--signal-dim:#003E8F;--ref:#1E3A6E;--ref-dim:#E3EEFC;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color:var(--ink);
}
.blueprysm-page .mono{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.blueprysm-page .kick{margin-bottom:16px}
.blueprysm-page h1{font-size:clamp(34px,5.4vw,60px);font-stretch:112%;font-weight:700;letter-spacing:-.02em;line-height:1.04}
.blueprysm-page h2{font-size:clamp(23px,2.7vw,32px);margin-bottom:14px;font-weight:700;letter-spacing:-.02em}
.blueprysm-page h3{font-size:var(--fs-md);letter-spacing:-.01em;font-weight:700}
.blueprysm-page .lede{font-size:var(--fs-lg);line-height:var(--lh-tight);color:var(--ink2);max-width:var(--col);margin-top:18px}
.blueprysm-page .rule{border:0;border-top:1px solid var(--grid);margin:44px 0}

.blueprysm-page .grid{display:grid;gap:26px}
.blueprysm-page .g2{grid-template-columns:1.25fr .75fr}
.blueprysm-page .g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.blueprysm-page .g2,.blueprysm-page .g3{grid-template-columns:1fr}}

.blueprysm-page .panel{background:var(--panel);border:1px solid var(--grid);padding:22px}
.blueprysm-page .panel h3{margin-bottom:8px}
.blueprysm-page .num{font-family:var(--mono);font-size:var(--fs-3xs);color:var(--signal);letter-spacing:.14em}
.blueprysm-page .k{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ref);letter-spacing:.06em}

.blueprysm-page .checks{list-style:none;margin:0;padding:0}
.blueprysm-page .checks li{padding:11px 0 11px 22px;border-bottom:1px solid var(--grid);position:relative;color:var(--ink);font-size:var(--fs-sm)}
.blueprysm-page .checks li:before{content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--signal)}

.blueprysm-page .spec{font-family:var(--mono);font-size:var(--fs-xs);line-height:2;color:var(--ink2)}
.blueprysm-page .ph{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.1em;text-transform:uppercase;color:var(--signal);border:1px solid var(--signal-dim);padding:2px 6px;margin-left:8px;white-space:nowrap}
.blueprysm-page .rc{display:block;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ref);margin-top:8px;line-height:var(--lh-body)}
.blueprysm-page .cta{display:inline-block;margin-top:22px;background:var(--signal);color:#0a0400;font-weight:600;font-size:var(--fs-sm);padding:13px 22px;text-decoration:none;border:0}
.blueprysm-page .cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--edge)}

.blueprysm-page .finding{border-left:2px solid var(--signal);padding:16px 0 16px 18px;margin:26px 0}
.blueprysm-page .finding b{color:var(--ink);font-size:var(--fs-md);font-stretch:108%}
.blueprysm-page .figs{display:flex;gap:30px;flex-wrap:wrap;margin-top:14px}
.blueprysm-page .fig .v{font-family:var(--mono);font-size:var(--fs-xl);color:var(--ref);letter-spacing:-.02em}
.blueprysm-page .fig .l{font-family:var(--mono);font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:.12em;color:var(--ink3);margin-top:3px}

/* hub */
.blueprysm-page .filters{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 4px}
.blueprysm-page .chip{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--grid);color:var(--ink2);padding:6px 11px;background:transparent;cursor:pointer}
.blueprysm-page .chip[aria-pressed="true"]{border-color:var(--ref-dim);color:var(--ref)}
.blueprysm-page .chip:focus-visible{outline:2px solid var(--ref);outline-offset:2px}
.blueprysm-page .row{display:grid;grid-template-columns:86px 1fr auto;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--grid)}
.blueprysm-page .row .t{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.blueprysm-page .row[data-t="tool"] .t{color:var(--signal)}
.blueprysm-page .row[data-t="analysis"] .t{color:var(--ref)}
.blueprysm-page .row .d{font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ink3);white-space:nowrap}
.blueprysm-page .row h3{font-weight:500;font-size:var(--fs-base);letter-spacing:0}
.blueprysm-page .row p{color:var(--ink2);font-size:var(--fs-sm);margin-top:3px}
.blueprysm-page .row.hidden{display:none}
.blueprysm-page .count{font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ink3);letter-spacing:.1em;margin-top:18px}

/* method */
.blueprysm-page .step{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--grid)}
.blueprysm-page .step .n{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--signal);letter-spacing:.1em;padding-top:4px}
.blueprysm-page .ai{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--grid);margin-top:10px}
.blueprysm-page .ai div{padding:14px 16px}
.blueprysm-page .ai div+div{border-left:1px solid var(--grid)}
.blueprysm-page .ai .h{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.blueprysm-page .ai .a .h{color:var(--ref)}
.blueprysm-page .ai .b .h{color:var(--signal)}
.blueprysm-page .ai p{font-size:var(--fs-sm);color:var(--ink2)}
@media(max-width:600px){.blueprysm-page .ai{grid-template-columns:1fr}.blueprysm-page .ai div+div{border-left:0;border-top:1px solid var(--grid)}}
.blueprysm-page .ev{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.blueprysm-page .ev span{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--grid);padding:4px 9px;color:var(--ink2)}
.blueprysm-page .ev .f{border-color:var(--ref-dim);color:var(--ref)}
.blueprysm-page .ev .c{border-color:var(--signal-dim);color:var(--signal)}
.blueprysm-page .note{font-size:var(--fs-xs);color:var(--ink3);margin-top:34px;border-top:1px solid var(--grid);padding-top:14px}

/* ---------------------------------------------------------------------------
 * Shared page primitives (ADR-0011).
 *
 * The eyebrow / card / grid rules were written for the homepage and live in
 * home.css, which is only enqueued on the front page. The Thinking hub uses the
 * same vocabulary, so the parts it needs are repeated here — page-types.css is
 * loaded site-wide. Kept scoped to .blueprysm-page so it cannot collide with the
 * homepage's own copy.
 * ------------------------------------------------------------------------ */
.blueprysm-page{--gutter:clamp(20px,5vw,96px);--maxw:76rem;
	/* One reading column for the whole site, set once. 48rem holds the widest
	   numeric table at --fs-sm cells (the six-column carrier table measures
	   694px) and keeps --fs-base prose near 80 characters a line. Page types
	   previously set their own: 60rem for articles and services, 46rem for
	   plain pages, which is a second scale doing the same job as the first.
	   Now set once, in :root. */
	}
.blueprysm-page .pad{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,6vw,88px) var(--gutter)}
.blueprysm-page section+section{border-top:1px solid var(--rule)}
.blueprysm-page .eyebrow{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 22px}
.blueprysm-page .eyebrow b{color:var(--accent);font-weight:500;margin-right:10px}
.blueprysm-page h1{font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.04em;line-height:1.05;margin:0 0 20px;max-width:18ch}
.blueprysm-page h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin:0 0 16px}
.blueprysm-page h3{font-size:var(--fs-md);letter-spacing:-.02em;margin:0 0 9px}
.blueprysm-page .section-lead{max-width:var(--col);color:var(--ink-2);font-size:var(--fs-md);margin:0 0 clamp(28px,3.5vw,44px)}
.blueprysm-page .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.blueprysm-page .card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);padding:26px 24px 22px;color:inherit}
.blueprysm-page .card:hover{border-color:var(--accent);text-decoration:none}
.blueprysm-page .card .k{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 16px;font-family:var(--mono)}
.blueprysm-page .card p{color:var(--ink-2);font-size:var(--fs-sm);margin:0}
.blueprysm-page .card .go{margin-top:20px;font-size:var(--fs-xs);font-weight:500;color:var(--accent)}
.blueprysm-page .btn{display:inline-block;font-size:var(--fs-sm);font-weight:500;padding:13px 24px;border:1px solid transparent}
.blueprysm-page .btn.fill{background:var(--accent);color:#FFFFFF}
.blueprysm-page .btn.fill:hover{background:var(--accent-deep);text-decoration:none}
.blueprysm-page .btn.line{border-color:var(--rule-2);color:var(--ink)}
.blueprysm-page .btn.line:hover{border-color:var(--ink);text-decoration:none}
.blueprysm-page .hub-head{padding-bottom:clamp(28px,3.5vw,48px)}
@media(max-width:760px){.blueprysm-page .grid-3{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------------------
 * Contact form (blueprysm/contact-form). No JavaScript: it posts, redirects and
 * renders its own result, so it works with scripting off and cannot be
 * double-submitted by a refresh.
 * ------------------------------------------------------------------------ */
.bp-form{max-width:34rem;margin:0}
.bp-field{display:flex;flex-direction:column;gap:7px;margin:0 0 22px}
.bp-field label{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.bp-field .bp-opt{letter-spacing:.06em;text-transform:none;color:var(--ink-3)}
.bp-field input,.bp-field textarea{
  font-family:var(--sans);font-size:var(--fs-base);color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-2);padding:12px 13px;width:100%;border-radius:0;
}
.bp-field textarea{resize:vertical;line-height:var(--lh-body)}
.bp-field input:focus-visible,.bp-field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--accent)}
.bp-hint{font-size:var(--fs-xs);color:var(--ink-3)}
.bp-actions{margin:0 0 18px}
.bp-legal{font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-3);max-width:34rem;margin:0}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a screen reader is told to ignore it via aria-hidden. */
.bp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.bp-form-note{border-left:3px solid var(--rule-2);padding:14px 18px;margin:0 0 26px;max-width:34rem}
.bp-form-note p{margin:0 0 6px}
.bp-form-note p:last-child{margin:0}
.bp-form-ok{border-left-color:var(--accent);background:var(--accent-soft)}
.bp-form-err{border-left-color:var(--reported);background:rgba(138,97,0,.07)}
.bp-form-err p{color:var(--ink)}

/* ---------------------------------------------------------------------------
 * Generic page template (templates/page.html).
 *
 * Without this template WordPress falls a page back to index.html, which renders
 * wp:post-excerpt — and an excerpt STRIPS block markup. Ordinary prose survived
 * that as plain text, so it looked fine, while anything interactive (the contact
 * form) silently vanished. Any page with no page-{slug}.html needs a real
 * template that runs post-content.
 * ------------------------------------------------------------------------ */
.page-plain .pad{padding-block:clamp(48px,6vw,88px)}
.page-plain .entry-title{font-size:clamp(2.1rem,4.6vw,3.1rem);letter-spacing:-.04em;line-height:1.05;margin:0 0 28px;max-width:20ch}
.page-plain .wp-block-post-content{max-width:41rem}
.page-plain .wp-block-post-content > * + *{margin-top:1.15em}
.page-plain .wp-block-post-content h2{font-size:var(--fs-xl);margin-top:2.2em}
.page-plain .wp-block-post-content h3{font-size:var(--fs-md);margin-top:1.8em}
.page-plain .wp-block-post-content p{color:var(--ink-2)}
.page-plain .wp-block-post-content strong{color:var(--ink)}
.page-plain .wp-block-post-content ul{padding-left:1.15em;color:var(--ink-2)}
.page-plain .wp-block-post-content li+li{margin-top:.6em}
.page-plain .wp-block-post-content code{font-family:var(--mono);font-size:.88em;background:var(--surface);border:1px solid var(--rule);padding:1px 5px}
.page-plain .has-large-font-size{font-size:var(--fs-lg);line-height:var(--lh-tight);color:var(--ink)}

/* About page ---------------------------------------------------------------
 * The profile is the page, so it gets room rather than being squeezed into the
 * generic prose column.
 * ------------------------------------------------------------------------ */
.page-about h1{max-width:20ch}
.page-about .lede{font-size:var(--fs-lg);line-height:var(--lh-tight);color:var(--ink-2);max-width:var(--col);margin:0 0 clamp(36px,4.5vw,56px)}
.page-about .about-close{margin:clamp(48px,6vw,80px) 0 0;padding-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--rule);max-width:var(--col)}
.page-about .about-close h2{font-size:var(--fs-lg);margin:0 0 14px}
.page-about .about-close p{color:var(--ink-2);margin:0 0 14px;line-height:var(--lh-body)}
.page-about .about-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* The closing block is now the two buttons alone, so the first child carries no
   extra top margin on top of the block's own padding. */
.page-about .about-close>.about-cta:first-child{margin-top:0}

/* About: a bio, not a CV. Set at reading width, with the name as a quiet
   masthead rather than a heading — the page has one already. */
.blueprysm-page .bio{max-width:var(--col);margin:2.4rem 0 0}
.blueprysm-page .bio-name{
	font-family:var(--mono,monospace);font-size:var(--fs-xs);letter-spacing:.14em;
	text-transform:uppercase;color:var(--ink,#12141A);margin:0 0 1.4rem;
	padding:0 0 1rem;border-bottom:1px solid var(--rule,#DCDAD3)}
.blueprysm-page .bio-name span{color:var(--ink-3,#5F6472)}
.blueprysm-page .bio p{line-height:var(--lh-body);margin:0 0 1.2em}
.blueprysm-page .bio p+p{margin-top:0}

/* Thought-leadership hub: sections of real work, not cards describing categories. */
.blueprysm-page .tl-sec{margin:3.4rem 0 0;max-width:var(--col)}
.blueprysm-page .tl-sec h2{margin:.3rem 0 .6rem!important}
.blueprysm-page .tl-sec .section-lead{margin:0 0 1rem}
.blueprysm-page .tl-next{
	margin-top:3.6rem;padding:1.5rem 1.6rem;
	background:var(--surface-2,#EFEDE8);border:1px solid var(--rule,#DCDAD3)}
.blueprysm-page .tl-next h2{font-size:var(--fs-md);margin:0 0 .5rem!important}
.blueprysm-page .tl-next p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body)}

.blueprysm-page .tl-rows{margin:1.4rem 0 0;border-top:1px solid var(--rule,#DCDAD3);max-width:none;width:min(64rem,100%)}
.blueprysm-page .tl-row{
	display:grid;grid-template-columns:7rem 1fr 10rem;gap:1.2rem;
	padding:1.2rem .4rem;text-decoration:none;color:inherit;
	border-bottom:1px solid var(--rule,#DCDAD3);transition:background .12s}
.blueprysm-page .tl-row:hover{background:var(--surface-2,#EFEDE8)}
.blueprysm-page .tl-row .t{
	font-family:var(--mono,monospace);font-size:var(--fs-2xs);letter-spacing:.1em;
	text-transform:uppercase;color:var(--accent,#005DD6);padding-top:.3rem}
.blueprysm-page .tl-row .h{display:block;font-weight:600;font-size:var(--fs-base);color:var(--ink,#12141A)}
.blueprysm-page .tl-row .d{display:block;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2,#565B66);margin:.25rem 0 0}
.blueprysm-page .tl-row .d a{color:var(--accent,#005DD6)}
.blueprysm-page .tl-row .m{font-size:var(--fs-xs);color:var(--ink-3,#5F6472);padding-top:.35rem;line-height:var(--lh-label)}
@media (max-width:860px){
	.blueprysm-page .tl-row{grid-template-columns:1fr;gap:.35rem}
	.blueprysm-page .tl-row .m{padding-top:.4rem}
}

/* Practice lines. */
.blueprysm-page .service{max-width:none}
.blueprysm-page .service h1{max-width:20ch}
.blueprysm-page .service .lede{max-width:var(--col)}
.blueprysm-page .svc-grid{
	display:grid;grid-template-columns:1fr 20rem;gap:2.4rem;
	margin:2.6rem 0 0;align-items:start}
.blueprysm-page .svc-grid h2{margin:0 0 .9rem!important}
.blueprysm-page .svc-grid .panel ul{list-style:none;padding:0;margin:0}
.blueprysm-page .svc-grid .panel li{
	font-size:var(--fs-sm);padding:.42rem 0;border-bottom:1px solid var(--rule,#DCDAD3)}
.blueprysm-page .svc-grid .panel li:last-child{border-bottom:0}

/* The proof section. A line with published evidence and a line without get the
   same prominence — the difference is what the heading says, not how quiet it is. */
.blueprysm-page .svc-proof{
	margin:3rem 0 0;padding:1.5rem 1.6rem;max-width:var(--col);
	border-left:3px solid var(--accent,#005DD6);background:var(--surface-2,#EFEDE8)}
.blueprysm-page .svc-proof.thin{border-left-color:var(--ink-3,#5F6472)}
.blueprysm-page .svc-proof h2{font-size:var(--fs-md);margin:0 0 .5rem!important}
.blueprysm-page .svc-proof p{margin:0;line-height:var(--lh-body)}
.blueprysm-page .svc-dec,.blueprysm-page .svc-rungs{margin:3rem 0 0}
.blueprysm-page .svc-index{margin-top:2rem}
.blueprysm-page .svc-index .tl-row{grid-template-columns:10rem 1fr 11rem}
@media (max-width:900px){
	.blueprysm-page .svc-grid{grid-template-columns:1fr;gap:1.6rem}
	.blueprysm-page .svc-index .tl-row{grid-template-columns:1fr}
}

/* Rungs as three cards. (.g3 only sets the columns — .grid is what makes it a
   grid, and .step is the method page's row component, not a card.) */
.blueprysm-page .rung{
	border-top:2px solid var(--ink,#12141A);padding:1rem 0 0;display:flex;flex-direction:column}
.blueprysm-page .rung .n{margin:0 0 .5rem;color:var(--signal,#005DD6)}
.blueprysm-page .rung h3{margin:0 0 .7rem}
.blueprysm-page .rung ul{list-style:none;padding:0;margin:0 0 auto}
.blueprysm-page .rung li{
	font-size:var(--fs-sm);line-height:var(--lh-body);padding:.45rem 0;color:var(--ink2,#565B66);
	border-bottom:1px solid var(--grid,#DCDAD3)}
.blueprysm-page .rung li:last-child{border-bottom:0}
.blueprysm-page .rung .spec{
	font-family:var(--mono,monospace);font-size:var(--fs-2xs);letter-spacing:.12em;
	text-transform:uppercase;color:var(--ink3,#5F6472);margin:.9rem 0 0}
.blueprysm-page .svc-rungs .about-cta{margin-top:1.8rem}
.blueprysm-page .svc-rungs h2{margin-bottom:1.5rem!important}
.blueprysm-page .svc-dec h2{margin-bottom:.4rem!important}

/* Width, for the page types that manage their own measure.
   Same cause as the analysis pages: WordPress caps .entry-content at
   theme.json's global contentSize, which clamped the service pages and their
   row lists to 656px whatever the screen. Pages that rely on that cap for
   their reading width — privacy, and anything else on the plain page
   template — keep it. */
.blueprysm-page.page-service,
.blueprysm-page.page-services{--maxw:88rem}
.page-service .entry-content,
.page-service .wp-block-post-content{max-width:none}

.blueprysm-page .service .lede,
.blueprysm-page .svc-proof{max-width:var(--col)}
.blueprysm-page .svc-grid{grid-template-columns:minmax(0,1fr) 22rem;max-width:72rem}
.blueprysm-page .tl-rows,
.blueprysm-page .svc-index{width:100%;max-width:76rem}
.blueprysm-page .aindex{max-width:82rem}
.blueprysm-page .tl-sec{max-width:46rem}

/* Handheld. The gutter already scales; these stop the wide components from
   forcing a horizontal scroll, and give tables a scroll of their own instead. */
@media (max-width:640px){
	.blueprysm-page .svc-grid{grid-template-columns:1fr;max-width:none}
	.blueprysm-page .svc-index .tl-row,
	.blueprysm-page .tl-row{grid-template-columns:1fr;gap:.35rem}
	.blueprysm-page .figs{grid-template-columns:1fr 1fr}
	.blueprysm-page h1{overflow-wrap:break-word;hyphens:auto}
}

/* Reading measure, everywhere a page type sets its own width.
   Measured rather than guessed: at this type size 38rem renders about 72
   characters a line, which is inside the band long-form reading wants. The
   wide components above are exempt — a table is not prose. */
.blueprysm-page .service .lede,
.blueprysm-page .svc-proof{max-width:var(--col)}
.blueprysm-page .service>p,
.blueprysm-page .svc-grid .checks,
.blueprysm-page .svc-dec>p,
.blueprysm-page .svc-rungs>p,
.blueprysm-page .service .note{max-width:var(--col)}
.blueprysm-page .tl-sec{max-width:var(--col)}
.blueprysm-page .tl-next{max-width:var(--col)}
.blueprysm-page .tl-row .d{max-width:var(--col)}

/* The thought-leadership hub carries the same wide index as the analyses. */
.blueprysm-page.page-thinking{--maxw:88rem}
.page-thinking .entry-content,
.page-thinking .wp-block-post-content{max-width:none}

/* One column, on the pages that are read like articles.
   Same rule as the analyses: every part shares both margins. The component
   widths set earlier in this file produced four different measures on a
   service page — lede at 38rem, the problem list at 38rem, the deliverable
   panel at 22rem, the row lists at 76rem — which read as four designs. */
.blueprysm-page.page-service,
.blueprysm-page.page-services,
.blueprysm-page.page-thinking{--maxw:78rem}

.page-service .service,
.page-services main>.pad>*,
.page-thinking .entry-content{max-width:none}

.blueprysm-page .service>*,
.blueprysm-page .service .svc-proof,
.blueprysm-page .service .svc-dec,
.blueprysm-page .service .svc-rungs,
.blueprysm-page .tl-sec,
.blueprysm-page .tl-next,
.blueprysm-page .tl-rows,
.blueprysm-page .svc-index,
.blueprysm-page .aindex{
	width:min(var(--col,48rem),100%);max-width:none;margin-inline:auto}

.blueprysm-page .service .lede,
.blueprysm-page .service>p,
.blueprysm-page .svc-grid .checks,
.blueprysm-page .svc-dec>p,
.blueprysm-page .svc-rungs>p,
.blueprysm-page .service .note,
.blueprysm-page .tl-row .d,
.blueprysm-page .tl-sec .section-lead{max-width:none}

/* The deliverable panel sat in a fixed 22rem column, which put a fourth
   right edge on the page. It now shares the split evenly. */
.blueprysm-page .svc-grid{
	grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
	max-width:none;width:100%}

/* The archive and hub templates put their headings straight into the page
   container, so those sat at the container width while the index below them
   sat in the column — two left edges and four right edges on one page.
   Every direct child of the content area now shares the column. */
/* Every block on every page type sits in the one reading column. This was
   scoped to the four article-like types; the rest kept whatever width their
   container happened to have, which is why a bio paragraph measured 936px on
   /about/ and a step paragraph 1008px on /method/ while the same paragraph in
   an analysis measured 768px. */
.blueprysm-page .pad>*,
.blueprysm-page .entry-content>*,
.page-services main>.pad>*{
	width:min(var(--col,48rem),100%);max-width:none;margin-inline:auto}

/* The plain page template sets its title outside .entry-content, so the two
   had different measures. Privacy and terms are read like documents too. */

.page-plain .entry-title,
.page-plain .entry-content,
.page-plain .entry-content>*{
	width:min(var(--col,48rem),100%);max-width:none;margin-inline:auto}

/* The service headline kept an 20ch cap from the page-type sheet, which left
   it as the one block on the page not sharing the column. */
.blueprysm-page .service h1,
.blueprysm-page .service>h1{width:100%;max-width:none;text-wrap:balance}

/* The resource library.
   The hub rows became links when the catalogue stopped being a hard-coded list
   of claims, so they need the affordances of a link without losing the row grid
   they already had. */
.blueprysm-page a.row{text-decoration:none;color:inherit;transition:background .12s}
.blueprysm-page a.row:hover{background:var(--accent-soft,rgba(0,93,214,.06));text-decoration:none}
.blueprysm-page a.row:hover h3{color:var(--accent,#005DD6)}
.blueprysm-page .row[data-t="template"] .t{color:var(--reported,#8A6100)}

/* The catalogue is the last thing on /tools/. The block that used to follow it
   was carrying the space between the final row and the footer, so without a
   margin here the two rules meet and the list looks truncated. */
[data-blueprysm-hub]{padding-bottom:clamp(40px,5vw,72px)}


/* A resource page.
   The `tool` post type renders through single-tool.html, which wraps its
   content in .blueprysm-shell rather than .blueprysm-page — the free spectrum
   tool brings its own stylesheet and does not want the page-type rules. So the
   article carries its own measure and its own type here rather than borrowing
   the page type's, which would have meant changing a template the free tool
   also renders through. */
.resource{width:min(var(--col),100%);margin-inline:auto;
	font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-2,#565B66)}
.resource>*{max-width:none}
.resource .kick{font-family:var(--mono,monospace);font-size:var(--fs-2xs);
	letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,#5F6472);margin:0 0 1rem}
.resource h1{font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.08;letter-spacing:-.035em;
	color:var(--ink,#12141A);margin:0 0 1rem;text-wrap:balance}
.resource h2{font-size:var(--fs-md);color:var(--ink,#12141A);
	letter-spacing:-.02em;margin:2.6rem 0 .7rem}
.resource .lede{font-size:var(--fs-lg);line-height:var(--lh-tight);
	color:var(--ink-2,#565B66);margin:0 0 1.6rem}
.resource p{margin:0 0 1.1em}
.resource .rlist{margin:0 0 1.2rem;padding-left:1.15rem}
.resource .rlist li{margin:0 0 .55rem;line-height:var(--lh-body)}
.resource .rrel a{font-weight:500}

/* The download block. Free means free: no gate, no interstitial, and a control
   that says what it will hand you before you click it. */
.rdl{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
	margin:2rem 0 2.4rem;padding:1.4rem 1.6rem;
	background:var(--ink,#12141A);border-radius:10px}
.rdl .free{margin:0;color:rgba(255,255,255,.72);font-size:var(--fs-sm);
	flex:1 1 17rem;line-height:var(--lh-body)}
a.dl{display:inline-flex;align-items:center;gap:.75rem;
	padding:.8rem 1.25rem;border-radius:7px;background:var(--bright,#009CFF);
	color:var(--ink,#12141A);text-decoration:none;font-weight:600;font-size:var(--fs-base)}
a.dl:hover{background:var(--sky,#58D1FC);text-decoration:none}
a.dl .fmt{font-family:var(--mono,monospace);font-size:var(--fs-2xs);
	letter-spacing:.12em;text-transform:uppercase;
	padding:.15rem .45rem;border-radius:4px;background:rgba(18,20,26,.14)}
a.dl .sz{font-family:var(--mono,monospace);font-size:var(--fs-2xs);opacity:.66}

/* What a resource refuses to do, given the same weight as what it does. */
.rrefuse{margin:2rem 0;padding:1.1rem 1.4rem;
	border-left:3px solid var(--reported,#8A6100);background:var(--surface-2,#FBFAF8)}
.rrefuse .mono{font-family:var(--mono,monospace);font-size:var(--fs-2xs);
	letter-spacing:.14em;text-transform:uppercase;color:var(--reported,#8A6100);margin:0 0 .4rem}
.rrefuse p:last-child{margin:0}
.resource .rsrc{font-size:var(--fs-sm);color:var(--ink-3,#5F6472)}
.resource .rcorr{margin-top:2.8rem;padding-top:1.2rem;
	border-top:1px solid var(--rule,#DCDAD3);font-size:var(--fs-sm);color:var(--ink-3,#5F6472)}
.resource .rback{font-family:var(--mono,monospace);font-size:var(--fs-xs);letter-spacing:.06em}

@media (max-width:640px){
	.blueprysm-page a.row{grid-template-columns:1fr auto}
	.blueprysm-page a.row .t{grid-column:1}
	.blueprysm-page a.row>div{grid-column:1/-1}
	.rdl{padding:1.1rem 1.2rem}
}

/* Resources attached to a decision, on the decision page. */
.blueprysm-page .dres .rlist{margin:.7rem 0 0;padding-left:1rem;list-style:none}
.blueprysm-page .dres .rlist li{margin:0 0 .6rem;padding-left:0;line-height:1.4}
.blueprysm-page .dres .rlist a{font-weight:500;font-size:var(--fs-sm)}
.blueprysm-page .dres .fmt{display:block;font-family:var(--mono,monospace);
	font-size:var(--fs-3xs);letter-spacing:.1em;color:var(--ink-3,#5F6472);margin-top:2px}
.blueprysm-page .dres .dfree{font-family:var(--mono,monospace);font-size:var(--fs-3xs);
	letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3,#5F6472);margin:.9rem 0 0}

/* Blog posts, imported from blog.blueprysm.com.
   These are long-form articles with images, so they take the site's reading
   column and the same type scale as everything else. The template they used to
   render through was written for a demonstration post and carried a hard-coded
   "Demonstration analysis" eyebrow above 156 real ones. */
.blueprysm-page.page-post .entry-header{margin:0 0 1.8rem}
.page-post .entry-kick{gap:.5rem 1rem;margin:0 0 1rem;align-items:baseline}
.page-post .entry-kick a,
.page-post .entry-kick .wp-block-post-date{font-family:var(--mono,monospace);
	font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
	color:var(--ink-3,#5F6472);text-decoration:none}
.page-post .entry-kick a:hover{color:var(--accent,#005DD6)}
.blueprysm-page .entry-title{font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.08;
	letter-spacing:-.035em;margin:0 0 1rem;text-wrap:balance}
.page-post .entry-standfirst{font-size:var(--fs-lg);line-height:var(--lh-tight);
	color:var(--ink-2,#565B66);margin:0 0 1.6rem}
.page-post .entry-figure{margin:0 0 2.2rem}
.page-post .entry-figure img{width:100%;height:auto;border-radius:10px;display:block}
.page-post .entry-content img{max-width:100%;height:auto;border-radius:8px}
.page-post .entry-content h2{font-size:var(--fs-xl);letter-spacing:-.02em;margin:2.8rem 0 .8rem}
.page-post .entry-content h3{font-size:var(--fs-md);margin:2rem 0 .6rem}
.page-post .entry-content ul,
.page-post .entry-content ol{padding-left:1.2rem;margin:0 0 1.2rem}
.page-post .entry-content li{margin:0 0 .5rem;line-height:var(--lh-body)}
.page-post .entry-content table{width:100%;border-collapse:collapse;margin:0 0 1.6rem;
	font-size:var(--fs-sm)}
.page-post .entry-content th,.page-post .entry-content td{
	padding:.6rem .7rem;border-bottom:1px solid var(--rule,#DCDAD3);text-align:left;
	vertical-align:top}
.page-post .entry-content th{font-weight:600;color:var(--ink,#12141A)}
.page-post .entry-foot{margin-top:3rem;padding-top:1.4rem;
	border-top:1px solid var(--rule,#DCDAD3)}
.page-post .backlink{font-family:var(--mono,monospace);font-size:var(--fs-xs);letter-spacing:.06em}

/* The blog index. */
.blueprysm-page.page-blog{--maxw:88rem}
.page-blog .bloglist{margin-top:2.6rem}
.page-blog .wp-block-post-template{display:grid;gap:2.4rem 2rem;
	grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));list-style:none;padding:0}
.page-blog .bpost{display:flex;flex-direction:column}
.page-blog .bthumb img{width:100%;height:180px;object-fit:cover;border-radius:10px;display:block}
.page-blog .bmeta{margin:.9rem 0 .4rem}
.page-blog .bmeta .wp-block-post-date{font-family:var(--mono,monospace);
	font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3,#5F6472)}
.page-blog .wp-block-post-title{font-size:var(--fs-md);line-height:1.25;
	letter-spacing:-.015em;margin:0 0 .5rem}
.page-blog .wp-block-post-title a{color:var(--ink,#12141A);text-decoration:none}
.page-blog .wp-block-post-title a:hover{color:var(--accent,#005DD6)}
.page-blog .wp-block-post-excerpt{font-size:var(--fs-sm);color:var(--ink-2,#565B66);
	line-height:var(--lh-body)}
.page-blog .wp-block-post-excerpt__more-text{display:none}
.page-blog .bpage{margin-top:3.4rem;padding-top:1.4rem;
	border-top:1px solid var(--rule,#DCDAD3);font-family:var(--mono,monospace);
	font-size:var(--fs-xs);letter-spacing:.06em}
.page-blog .bpage a{text-decoration:none}
.page-blog .bpage a:hover{text-decoration:underline}

@media (max-width:640px){
	.page-blog .wp-block-post-template{grid-template-columns:1fr;gap:2rem}
	.page-blog .bthumb img{height:150px}
}

/* The card grid is the one thing on a .blueprysm-page that should not sit in
   the reading column — it is an index, not prose. The site-wide rule that puts
   every direct child of .pad into --col was capping twelve cards at 48rem and
   giving two columns where there was room for four. */
.blueprysm-page.page-blog .pad>.bloglist{width:100%;max-width:none;margin-inline:0}
.page-blog .wp-block-post-template{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}

/* Featured images are whatever shape the source uploaded, so the cards only
   line up if the thumbnail is given one. */
.page-blog .bthumb,
.page-blog .wp-block-post-featured-image{margin:0}
.page-blog .bthumb a,
.page-blog .wp-block-post-featured-image a{display:block}
.page-blog .wp-block-post-featured-image img{width:100%;height:170px;
	object-fit:cover;border-radius:10px;display:block}
.page-blog .bpost>*{margin-inline:0}

/* The grid item is the <li> WordPress wraps each post in, not the group inside
   it, so the cards only line up if the li is the flex context and nothing in
   between carries a margin. Without this the first card sat 24px above its row. */
.page-blog .wp-block-post-template>li{display:flex;flex-direction:column;margin:0;padding:0}
.page-blog .wp-block-post-template>li>.bpost{margin:0;flex:1 1 auto;width:100%}
.page-blog .bpost>*:first-child{margin-top:0}
.page-blog .wp-block-post-featured-image img{height:180px}

/* ============================================================ the series grid
   /thinking/ used to inline the whole direct-to-device index: seven cards and a
   long closing paragraph before a reader reached the tools. Each series is now
   one card with a drawn cover, and the series itself lives on its own page.
   Like the blog grid this is an index rather than prose, so it is exempt from
   the site-wide rule that puts every child of .pad into the reading column. */
.blueprysm-page.page-thinking .pad>.sgrid{width:100%;max-width:none;margin-inline:0}

.sgrid{
	list-style:none;margin:1.8rem 0 0;padding:0;
	display:grid;gap:1.4rem;
	grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}

.scard{margin:0;display:flex}
.scard-a{
	display:flex;flex-direction:column;width:100%;
	text-decoration:none;color:inherit;
	border:1px solid var(--rule,#DCDAD3);border-radius:10px;
	background:var(--surface,#FFFFFF);overflow:hidden;
	transition:border-color .15s ease,transform .15s ease}
.scard-live .scard-a:hover,
.scard-live .scard-a:focus-visible{border-color:var(--accent,#005DD6);transform:translateY(-2px)}
.scard-live .scard-a:focus-visible{outline:2px solid var(--focus,#005DD6);outline-offset:2px}

/* The cover carries the same treatment as the article banners: ink field,
   hairline grid and blue wash painted here, the motif as SVG, and the type as
   real HTML over the top so the name stays readable at card size while the
   drawing letterboxes behind it. */
.scover{
	position:relative;margin:0;aspect-ratio:8/5;
	background-color:var(--ink,#12141A);
	background-image:
		linear-gradient(135deg,rgba(0,93,214,.42) 0%,rgba(0,93,214,.08) 55%,rgba(0,93,214,0) 100%),
		repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px 48px),
		repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 32px);
	box-shadow:inset 0 -1px 0 rgba(255,255,255,.10)}
.scover-svg{display:block;width:100%;height:100%}
.scover-cap{
	position:absolute;inset:0;margin:0;
	display:flex;flex-direction:column;justify-content:space-between;
	padding:.9rem 1rem;pointer-events:none;
	background:linear-gradient(to bottom,
		rgba(18,20,26,.50) 0,rgba(18,20,26,0) 30%,
		rgba(18,20,26,0) 46%,rgba(18,20,26,.86) 100%)}
.scover-cap .slab{
	align-self:flex-start;
	font-family:var(--mono,monospace);font-size:var(--fs-3xs);letter-spacing:.14em;
	text-transform:uppercase;color:rgba(255,255,255,.72);
	text-shadow:0 1px 5px rgba(18,20,26,.7)}
.scover-cap .sname{
	font-family:var(--display);font-size:var(--fs-md);line-height:var(--lh-tight,1.38);
	font-weight:600;color:#FFFFFF;
	text-shadow:0 1px 6px rgba(18,20,26,.85)}

.sline{margin:0;padding:1rem 1.1rem 0;font-size:var(--fs-sm);line-height:var(--lh-body,1.6);color:var(--ink-2,#565B66)}
.smeta{margin:.7rem 0 0;padding:0 1.1rem;font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3,#5F6472)}
.scta{margin-top:auto;padding:1rem 1.1rem 1.1rem;font-size:var(--fs-sm);font-weight:600;color:var(--accent,#005DD6)}
.scta::after{content:" \2192"}
.scard-soon .scard-a{padding-bottom:1.1rem;border-style:dashed}

/* In preparation. The cover is dimmed rather than greyed, so the family still
   reads, and the card is not a link because there is nothing to open yet. */
.scard-soon .scover-svg{opacity:.45}
.scard-soon .scover-cap .sname{color:rgba(255,255,255,.88)}

@media (max-width:640px){
	.sgrid{gap:1.1rem;grid-template-columns:1fr}
}

/* The published series is the point of the page, and in a plain grid it looked
   exactly as available as the six that are not. On a screen wide enough for
   three columns it takes two, with a wider cover so the row still lines up. */
@media (min-width:66rem){
	/* Cards take their natural height once one of them is double width, or the
	   single card beside the featured one stretches to match it and carries a
	   third of a card's worth of empty white below its text. */
	.sgrid{align-items:start}
	.sgrid .scard-live{grid-column:span 2}
	.sgrid .scard-live .scover{aspect-ratio:21/8}
	.sgrid .scard-live .scover-cap .sname{font-size:var(--fs-lg)}
	.sgrid .scard-live .sline{font-size:var(--fs-base);max-width:46ch}
}