/* ==========================================================================
   Blog — editorial listing, archives, search and single post.
   Built on the site-wide premium tokens declared on .la-page
   (--do-accent, --do-ink, --do-muted, --do-radius) so the blog reads as a
   natural extension of the rest of the site rather than a bolt-on.

   Fluid-first: the grids use auto-fill/minmax and the type uses clamp(), so
   the layout adapts continuously instead of snapping at a handful of widths.
   All motion is CSS-only, transform/opacity based, and disabled under
   prefers-reduced-motion.
   ========================================================================== */

.blog-page{
	--bp-line:rgba(20,20,30,.08);
	--bp-shadow:0 14px 34px rgba(20,20,30,.07);
	--bp-shadow-hi:0 26px 56px rgba(20,20,30,.16);
	--bp-tint:#faf8f6;
}

/* ---------- Listing header ---------- */
.bp-hero{
	position:relative;
	padding:clamp(72px,8vw,112px) 0 clamp(34px,5vw,52px);
	background:linear-gradient(180deg,#faf8f6 0%, #fff 100%);
	border-bottom:1px solid var(--bp-line);
	overflow:hidden;
}
/* Subtle brand wash — decorative only, no image request, no layout cost. */
.bp-hero:before{
	content:"";
	position:absolute;
	top:-180px; right:-140px;
	width:520px; height:520px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(233,99,0,.16) 0%, rgba(233,99,0,0) 70%);
	pointer-events:none;
}
.blog-page .bp-hero-inner{ position:relative; z-index:1; max-width:860px; }
.bp-hero-title{
	font-size:clamp(32px,4.6vw,52px);
	line-height:1.1;
	font-weight:700;
	letter-spacing:-.5px;
	color:var(--do-ink);
	margin:0 0 16px;
}
.bp-hero-intro{
	font-size:clamp(16px,1.5vw,18.5px);
	line-height:1.75;
	color:var(--do-muted);
	max-width:680px;
	margin:0;
}

/* Light-background variant of the shared breadcrumb pill. */
.bp-breadcrumb{
	display:flex;
	width:-moz-fit-content;
	width:fit-content;
	max-width:100%;
	justify-content:flex-start;
	margin:0 0 20px;
	background:#fff;
	border:1px solid var(--bp-line);
	box-shadow:0 4px 14px rgba(20,20,30,.05);
	backdrop-filter:none;
	-webkit-backdrop-filter:none;
	color:var(--do-muted);
	animation:none;
}
.bp-breadcrumb a{ color:var(--do-muted); }
.bp-breadcrumb a:hover,
.bp-breadcrumb a:focus-visible{ color:var(--do-accent); }
.bp-breadcrumb span[aria-hidden]{ color:rgba(20,20,30,.3); }

/* ---------- Toolbar: category filter + search ---------- */
.bp-toolbar{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	margin:0 0 clamp(30px,4vw,46px);
	padding-bottom:22px;
	border-bottom:1px solid var(--bp-line);
}
.bp-filters{ flex:1 1 420px; min-width:0; }
.bp-filters ul{
	list-style:none;
	margin:0;
	padding:4px 0;
	display:flex;
	flex-wrap:nowrap;
	gap:10px;
	overflow-x:auto;
	scrollbar-width:thin;
	-webkit-overflow-scrolling:touch;
}
.bp-filters li{ margin:0; flex:0 0 auto; }
.bp-chip{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:44px;              /* accessible touch target */
	padding:0 18px;
	border-radius:999px;
	background:#fff;
	border:1px solid var(--bp-line);
	color:var(--do-ink);
	font-size:14.5px;
	font-weight:600;
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
	transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.bp-chip:hover{ border-color:rgba(233,99,0,.45); color:var(--do-accent); transform:translateY(-2px); }
.bp-chip.is-active{
	background:var(--do-accent);
	border-color:var(--do-accent);
	color:#fff;
	box-shadow:0 10px 22px rgba(233,99,0,.32);
}
/* The active state is carried by fill + weight + aria-current, never colour alone. */
.bp-chip.is-active:hover{ color:#fff; }
.bp-chip-count{
	font-size:11.5px;
	font-weight:700;
	padding:3px 7px;
	border-radius:999px;
	background:rgba(20,20,30,.06);
	color:var(--do-muted);
}
.bp-chip.is-active .bp-chip-count{ background:rgba(255,255,255,.24); color:#fff; }

.bp-search{
	position:relative;
	display:flex;
	align-items:center;
	flex:0 1 320px;
	min-width:250px;
}
.bp-search i{
	position:absolute;
	left:16px;
	font-size:14px;
	color:var(--do-muted);
	pointer-events:none;
}
.bp-search input[type="search"]{
	width:100%;
	min-height:46px;
	padding:0 96px 0 40px;
	border-radius:999px;
	border:1px solid var(--bp-line);
	background:#fff;
	font-size:15px;
	color:var(--do-ink);
	transition:border-color .3s ease, box-shadow .3s ease;
}
.bp-search input[type="search"]:focus{
	outline:none;
	border-color:rgba(233,99,0,.5);
	box-shadow:0 0 0 4px rgba(233,99,0,.14);
}
.bp-search button{
	position:absolute;
	right:5px;
	min-height:38px;
	padding:0 18px;
	border:0;
	border-radius:999px;
	background:var(--do-accent);
	color:#fff;
	font-size:13.5px;
	font-weight:700;
	cursor:pointer;
	transition:background .3s ease, transform .3s ease;
}
.bp-search button:hover{ background:#c94f00; transform:translateY(-1px); }

/* ---------- Shared card meta ---------- */
.bp-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px 14px;
	margin:0 0 14px;
	font-size:12.5px;
	color:var(--do-muted);
}
.bp-meta i{ margin-right:6px; color:var(--do-accent); }
.bp-cat{
	position:relative;
	z-index:2;                     /* stays clickable above the stretched link */
	display:inline-block;
	padding:5px 12px;
	border-radius:999px;
	background:rgba(233,99,0,.1);
	color:var(--do-accent);
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	text-decoration:none;
	transition:background .3s ease, color .3s ease;
}
.bp-cat:hover{ background:var(--do-accent); color:#fff; }
.bp-date, .bp-time{ display:inline-flex; align-items:center; white-space:nowrap; }

/* "Read More" affordance with a directional arrow. */
.bp-more{
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin-top:18px;
	font-size:13.5px;
	font-weight:700;
	letter-spacing:.02em;
	color:var(--do-accent);
}
.bp-more i{ transition:transform .35s ease; }

/* ---------- Featured article (asymmetric split) ---------- */
.bp-featured-wrap{ margin:0 0 clamp(40px,5vw,64px); }
.bp-featured{
	display:grid;
	grid-template-columns:1fr;
	background:#fff;
	border:1px solid var(--bp-line);
	border-radius:var(--do-radius);
	box-shadow:var(--bp-shadow);
	overflow:hidden;
	transition:box-shadow .45s ease, transform .45s cubic-bezier(.2,.7,.25,1);
}
.bp-featured:hover{ box-shadow:var(--bp-shadow-hi); }
.bp-featured-media{
	position:relative;
	aspect-ratio:16/10;            /* reserved space — no layout shift */
	overflow:hidden;
	background:var(--bp-tint);
}
.bp-featured-media img{
	width:100%; height:100%;
	object-fit:cover;
	display:block;
	transition:transform .8s cubic-bezier(.2,.7,.25,1);
}
.bp-featured:hover .bp-featured-media img{ transform:scale(1.05); }
.bp-badge{
	position:absolute;
	top:18px; left:18px;
	z-index:2;
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 15px;
	border-radius:999px;
	background:rgba(20,20,28,.42);
	border:1px solid rgba(255,255,255,.28);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	color:#fff;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
}
.bp-badge i{ color:#ffae6b; }
.bp-featured-body{
	padding:clamp(26px,3.4vw,46px);
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.bp-featured-title{
	font-size:clamp(24px,2.9vw,36px);
	line-height:1.2;
	font-weight:700;
	margin:0 0 16px;
	color:var(--do-ink);
}
.bp-featured-title a{
	color:inherit;
	text-decoration:none;
	background-image:linear-gradient(var(--do-accent), var(--do-accent));
	background-repeat:no-repeat;
	background-size:0% 2px;
	background-position:0 100%;
	transition:background-size .4s cubic-bezier(.2,.7,.25,1), color .3s ease;
}
.bp-featured-title a:hover,
.bp-featured-title a:focus-visible{ color:var(--do-accent); background-size:100% 2px; }
.bp-featured-excerpt{
	font-size:16.5px;
	line-height:1.75;
	color:var(--do-muted);
	margin:0 0 26px;
}
.bp-featured-foot{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	padding-top:22px;
	border-top:1px solid var(--bp-line);
}
.bp-featured-cta{ padding:14px 28px; font-size:14px; }

/* ---------- Author line ---------- */
.bp-author{ display:flex; align-items:center; gap:12px; }
.bp-author img, .bp-avatar{
	width:40px; height:40px;
	border-radius:50%;
	object-fit:cover;
	border:2px solid #fff;
	box-shadow:0 4px 12px rgba(20,20,30,.14);
}
.bp-author-meta{ display:flex; flex-direction:column; line-height:1.3; }
.bp-author-label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--do-muted); }
.bp-author-name{ font-size:14.5px; font-weight:700; color:var(--do-ink); }

/* ---------- Standard card grid ---------- */
.bp-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
	gap:clamp(20px,2.4vw,28px);
}
.bp-card{
	position:relative;
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid var(--bp-line);
	border-radius:var(--do-radius);
	box-shadow:var(--bp-shadow);
	overflow:hidden;
	transition:transform .45s cubic-bezier(.2,.7,.25,1), box-shadow .45s ease, border-color .45s ease;
}
.bp-card:hover{ transform:translateY(-8px); box-shadow:var(--bp-shadow-hi); border-color:rgba(233,99,0,.22); }
.bp-card:focus-within{ border-color:rgba(233,99,0,.5); }
.bp-card-media{
	position:relative;
	aspect-ratio:3/2;
	overflow:hidden;
	background:var(--bp-tint);
}
.bp-card-media img{
	width:100%; height:100%;
	object-fit:cover;
	display:block;
	transition:transform .7s cubic-bezier(.2,.7,.25,1);
}
.bp-card:hover .bp-card-media img{ transform:scale(1.07); }
.bp-card-body{ display:flex; flex-direction:column; flex:1; padding:26px 24px 24px; }
.bp-card-title{
	font-size:19.5px;
	line-height:1.35;
	font-weight:700;
	margin:0 0 12px;
	color:var(--do-ink);
}
.bp-card-title a{
	color:inherit;
	text-decoration:none;
	transition:color .3s ease;
}
.bp-card-title a:hover{ color:var(--do-accent); }
/* Stretched link: the whole card is clickable, but only the title is in the
   tab order — one link per card, so screen-reader and keyboard users get a
   single meaningful target. */
.bp-card-title a:after{ content:""; position:absolute; inset:0; z-index:1; }
.bp-card-excerpt{
	font-size:14.8px;
	line-height:1.68;
	color:var(--do-muted);
	margin:0;
	flex:1;
}
.bp-card .bp-more{ position:relative; }
.bp-card:hover .bp-more i{ transform:translateX(5px); }

/* ---------- Compact horizontal rail ---------- */
.bp-rail-heading{
	font-size:15px;
	letter-spacing:.16em;
	text-transform:uppercase;
	font-weight:700;
	color:var(--do-ink);
	margin:clamp(44px,5vw,64px) 0 26px;
	display:flex;
	align-items:center;
	gap:16px;
}
.bp-rail-heading:after{
	content:"";
	flex:1; height:1px;
	background:linear-gradient(90deg, rgba(233,99,0,.55), rgba(0,0,0,0));
}
.bp-rail{ display:grid; grid-template-columns:repeat(auto-fill, minmax(420px,1fr)); gap:20px; }
.bp-compact{
	position:relative;
	display:grid;
	grid-template-columns:150px 1fr;
	gap:20px;
	align-items:center;
	padding:16px;
	background:#fff;
	border:1px solid var(--bp-line);
	border-radius:16px;
	transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.bp-compact:hover{ transform:translateX(5px); box-shadow:0 16px 32px rgba(20,20,30,.1); border-color:rgba(233,99,0,.28); }
.bp-compact-media{
	aspect-ratio:1/1;
	border-radius:12px;
	overflow:hidden;
	background:var(--bp-tint);
}
.bp-compact-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.25,1); }
.bp-compact:hover .bp-compact-media img{ transform:scale(1.06); }
.bp-compact-body{ min-width:0; }
.bp-compact .bp-meta{ margin-bottom:9px; }
.bp-compact-title{ font-size:17.5px; line-height:1.35; font-weight:700; margin:0 0 8px; color:var(--do-ink); }
.bp-compact-title a{ color:inherit; text-decoration:none; transition:color .3s ease; }
.bp-compact-title a:hover{ color:var(--do-accent); }
.bp-compact-title a:after{ content:""; position:absolute; inset:0; z-index:1; }
.bp-compact-excerpt{ font-size:14px; line-height:1.6; color:var(--do-muted); margin:0; }
.bp-compact .bp-more{ position:relative; margin-top:12px; font-size:12.5px; }
.bp-compact:hover .bp-more i{ transform:translateX(5px); }

/* ---------- Image placeholder (keeps the grid rhythm, no request) ---------- */
.bp-noimg{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%; height:100%;
	background:linear-gradient(135deg,#faf8f6 0%, #efe9e3 100%);
	color:rgba(233,99,0,.45);
	font-size:34px;
}

/* ---------- Pagination ----------
   Scoped as `.blog-page nav.pagination …` so it outranks the legacy
   `nav.pagination .page-numbers` rules in theme.css. */
.blog-page nav.pagination{
	display:flex;
	justify-content:center;
	margin:clamp(44px,5vw,66px) 0 0;
}
.blog-page nav.pagination .nav-links{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:10px;
}
.blog-page nav.pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	min-width:46px;
	min-height:46px;
	padding:0 16px;
	border-radius:999px;
	border:1px solid var(--bp-line);
	background:#fff;
	color:var(--do-ink);
	font-size:14.5px;
	font-weight:700;
	text-decoration:none;
	transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.blog-page nav.pagination a.page-numbers:hover{ border-color:rgba(233,99,0,.45); color:var(--do-accent); transform:translateY(-2px); }
.blog-page nav.pagination .page-numbers.current{
	background:var(--do-accent);
	border-color:var(--do-accent);
	color:#fff;
	box-shadow:0 10px 22px rgba(233,99,0,.3);
}
.blog-page nav.pagination .page-numbers.dots{ border-color:transparent; background:transparent; }

/* ---------- Empty state ---------- */
.bp-empty{
	text-align:center;
	max-width:560px;
	margin:0 auto;
	padding:clamp(40px,6vw,72px) 24px;
	border:1px dashed rgba(20,20,30,.16);
	border-radius:var(--do-radius);
	background:var(--bp-tint);
}
.bp-empty i{ font-size:40px; color:rgba(233,99,0,.45); margin-bottom:18px; display:block; }
.bp-empty h2{ font-size:26px; font-weight:700; margin:0 0 10px; color:var(--do-ink); }
.bp-empty p{ font-size:15.5px; line-height:1.7; color:var(--do-muted); margin:0 0 24px; }
.bp-empty .bp-search{ margin:0 auto 22px; }


/* ==========================================================================
   Single post — editorial long-form layout
   ========================================================================== */

/* ---------- Asymmetric split header ---------- */
.bp-split{
	position:relative;
	padding:clamp(70px,8vw,112px) 0 clamp(40px,5vw,64px);
	background:linear-gradient(180deg,#faf8f6 0%, #fff 78%);
	overflow:hidden;
}
.bp-split:before{
	content:"";
	position:absolute;
	top:-220px; right:-160px;
	width:620px; height:620px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(233,99,0,.14) 0%, rgba(233,99,0,0) 70%);
	pointer-events:none;
}
.blog-page .bp-split-inner{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:1fr;
	gap:clamp(32px,4vw,56px);
	align-items:center;
	max-width:1240px;
}
.bp-split-copy{ min-width:0; }
.bp-post-title{
	font-size:clamp(30px,3.9vw,50px);
	line-height:1.1;
	font-weight:700;
	letter-spacing:-.6px;
	color:var(--do-ink);
	margin:14px 0 20px;
}
/* Standfirst: the excerpt, set larger than body copy to lead the reader in. */
.bp-post-standfirst{
	font-size:clamp(17px,1.7vw,19.5px);
	line-height:1.7;
	color:var(--do-muted);
	margin:0 0 28px;
	max-width:34em;
}
.bp-cat-lg{ font-size:12px; padding:7px 15px; }
.bp-post-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px 18px;
	font-size:13.5px;
	color:var(--do-muted);
}
.bp-post-meta i{ margin-right:7px; color:var(--do-accent); }
.bp-post-meta-sep{ width:1px; height:26px; background:var(--bp-line); }

/* Featured photograph, offset behind an accent frame (the same device the
   Local Area pages use, so the blog reads as part of the same system). */
.bp-split-media{ position:relative; min-width:0; }
.bp-split-media-inner{
	position:relative;
	z-index:1;
	border-radius:var(--do-radius);
	overflow:hidden;
	box-shadow:0 30px 60px rgba(20,20,30,.22);
}
.bp-split-media-inner img{
	display:block;
	width:100%;
	height:100%;
	aspect-ratio:4/5;
	object-fit:cover;
}
.bp-split-media:after{
	content:"";
	position:absolute;
	top:30px; left:30px; right:-26px; bottom:-26px;
	border:3px solid rgba(233,99,0,.5);
	border-radius:var(--do-radius);
	z-index:0;
}
.bp-split-caption{
	position:relative;
	z-index:1;
	margin:16px 0 0;
	font-size:13px;
	line-height:1.6;
	color:var(--do-muted);
}

/* ---------- Body: sticky rail + article column ---------- */
/* Same max-width and gutter as the header's .do-wrap, so the rail's left edge
   lines up with the title above it. */
.bp-post-layout{
	display:grid;
	/* minmax(0,1fr), not 1fr: a plain 1fr track has an automatic min-content
	   floor, so one wide child (the comment textarea) would stretch the whole
	   column past the viewport and .la-page's overflow-x:hidden would clip the
	   article text. */
	grid-template-columns:minmax(0,1fr);
	gap:0;
	max-width:1240px;
	margin:0 auto;
	padding:clamp(20px,3vw,36px) 24px clamp(56px,7vw,90px);
}
.bp-rail{ display:none; }
.bp-rail-sticky{ position:sticky; top:110px; }

.bp-toc{ margin:0 0 30px; }
.bp-toc-label{
	display:block;
	font-size:11px;
	letter-spacing:.16em;
	text-transform:uppercase;
	font-weight:700;
	color:var(--do-muted);
	margin:0 0 14px;
}
.bp-toc-list{ list-style:none; margin:0; padding:0; counter-reset:bp-toc; }
.bp-toc-list li{ margin:0 0 2px; counter-increment:bp-toc; }
.bp-toc-list a{
	display:flex;
	gap:10px;
	padding:8px 0 8px 14px;
	border-left:2px solid var(--bp-line);
	font-size:13.5px;
	line-height:1.45;
	color:var(--do-muted);
	text-decoration:none;
	transition:color .3s ease, border-color .3s ease;
}
.bp-toc-list a:before{
	content:counter(bp-toc, decimal-leading-zero);
	flex:none;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.06em;
	padding-top:2px;
	color:rgba(20,20,30,.28);
	transition:color .3s ease;
}
.bp-toc-list a:hover{ color:var(--do-ink); border-color:rgba(233,99,0,.45); }
/* Current section: carried by weight + rule + colour, never colour alone. */
.bp-toc-list a.is-current{
	color:var(--do-ink);
	font-weight:700;
	border-color:var(--do-accent);
}
.bp-toc-list a.is-current:before{ color:var(--do-accent); }

.bp-share.is-vertical{ display:none; }

/* ---------- Article column ---------- */
.bp-post-content{ max-width:760px; margin:0 auto; min-width:0; }

.bp-post-content > *{ max-width:100%; }

/* Lead paragraph, set up a size from the body. */
.bp-post-content > p:first-of-type{
	font-size:19px;
	line-height:1.72;
	color:#33333b;
}

/* Numbered sections. A CSS counter, so it works on any post without the editor
   doing anything: the number sits in the left margin on wide screens and above
   the heading when there is no room. */
.bp-post-content{ counter-reset:bp-section; }
.bp-post-content h2{
	counter-increment:bp-section;
	position:relative;
	font-size:clamp(25px,2.6vw,33px);
	line-height:1.18;
	margin:56px 0 18px;
	padding-top:20px;
	scroll-margin-top:110px;
}
.bp-post-content h2:before{
	content:counter(bp-section, decimal-leading-zero);
	display:block;
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.2em;
	color:var(--do-accent);
	margin:0 0 10px;
}
.bp-post-content h2:after{
	content:"";
	position:absolute;
	left:0; top:0;
	width:40px; height:3px;
	border-radius:3px;
	background:var(--do-accent);
}
.bp-post-content h3{ font-size:clamp(20px,2vw,24px); scroll-margin-top:110px; }

/* ---------- Imagery ---------- */
.bp-post-content figure,
.bp-post-content .wp-block-image{ margin:34px 0; }
.bp-post-content .wp-block-image img{
	border-radius:var(--do-radius);
	display:block;
}
.bp-post-content .wp-element-caption,
.bp-post-content .wp-block-image figcaption{
	font-size:13px;
	line-height:1.6;
	color:var(--do-muted);
	margin-top:12px;
	padding-left:14px;
	border-left:2px solid rgba(233,99,0,.45);
	text-align:left;
}
/* theme.css zeroes the margin on .aligncenter; restore it inside the article. */
.bp-post-content .aligncenter{ margin-left:auto; margin-right:auto; text-align:center; }
.bp-post-content .aligncenter figcaption{ text-align:left; display:inline-block; }

/* Text wraps beside the image (editors pick this in the block toolbar). */
.bp-post-content .alignleft{
	float:left;
	width:min(42%, 300px);
	margin:6px 34px 20px 0;
}
.bp-post-content .alignright{
	float:right;
	width:min(42%, 300px);
	margin:6px 0 20px 34px;
}
/* Crop floated images to a consistent 4:5. A tall portrait left beside a short
   paragraph otherwise leaves a dead column of white below the text. */
.bp-post-content .alignleft img,
.bp-post-content .alignright img{
	width:100%;
	aspect-ratio:4/5;
	object-fit:cover;
}
/* Headings must never ride up alongside a floated image. */
.bp-post-content h2,
.bp-post-content h3{ clear:both; }

/* Breakout: wider than the reading measure, into the free space on the right. */
.bp-post-content .alignwide{
	width:calc(100% + 168px);
	max-width:none;
}
.bp-post-content .alignfull{
	width:100vw;
	max-width:none;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}
.bp-post-content .alignfull img{ border-radius:0; }

/* ---------- Pull quote ---------- */
.bp-post-content blockquote{
	position:relative;
	margin:38px 0;
	padding:30px 32px 30px 64px;
	border-left:4px solid var(--do-accent);
	border-radius:0 16px 16px 0;
	background:#faf8f6;
	font-size:clamp(18px,1.9vw,21px);
	line-height:1.6;
	font-style:italic;
	color:#33333b;
}
.bp-post-content blockquote:before{
	content:"\201C";
	position:absolute;
	left:22px; top:14px;
	font-size:58px;
	line-height:1;
	color:rgba(233,99,0,.35);
	font-family:Georgia, serif;
}
.bp-post-content blockquote p:last-child{ margin-bottom:0; }
.bp-post-content blockquote cite{
	display:block;
	margin-top:14px;
	font-size:13px;
	font-style:normal;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--do-muted);
}

/* ---------- Source / further-reading link line ---------- */
.bp-post-content .bp-source{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 26px;
	font-size:14.5px;
}
.bp-post-content .bp-source:before{
	content:"\2197";
	flex:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:26px; height:26px;
	border-radius:50%;
	background:rgba(233,99,0,.1);
	color:var(--do-accent);
	font-size:13px;
	font-weight:700;
}
.bp-post-content .bp-source a{
	font-weight:600;
	text-decoration:none;
	border-bottom:1px solid rgba(233,99,0,.4);
	transition:border-color .3s ease, color .3s ease;
}
.bp-post-content .bp-source a:hover{ color:#111; border-color:#111; }

/* ---------- Code ---------- */
.bp-post-content pre{
	background:#16161a;
	color:#f5f5f5;
	padding:20px 22px;
	border-radius:14px;
	overflow-x:auto;
	font-size:14px;
	line-height:1.6;
}
.bp-post-content code{ background:rgba(20,20,30,.06); padding:2px 6px; border-radius:5px; font-size:.92em; }
.bp-post-content pre code{ background:none; padding:0; }
.bp-post-content table{ display:block; overflow-x:auto; }

/* ---------- Desktop: rail appears, imagery breaks out ---------- */
@media screen and (min-width:981px){
	.blog-page .bp-split-inner{ grid-template-columns:1.08fr .92fr; }
	.bp-post-layout{
		grid-template-columns:200px minmax(0,760px);
		gap:56px;
		justify-content:start;
	}
	.bp-rail{ display:block; }
	.bp-share.is-vertical{ display:block; }
	/* The sticky rail carries sharing on desktop, so the footer copy is redundant. */
	.bp-post-foot .bp-share:not(.is-vertical){ display:none; }
	.bp-share.is-vertical ul{ flex-direction:column; gap:10px; }
	.bp-share.is-vertical .bp-share-label{
		display:block;
		margin-bottom:12px;
		font-size:11px;
		letter-spacing:.16em;
	}
	/* Section numbers move out into the margin beside the heading. */
	.bp-post-content h2{ padding-top:0; }
	.bp-post-content h2:before{
		position:absolute;
		left:-96px; top:6px;
		margin:0;
		width:76px;
		text-align:right;
		font-size:13px;
	}
	.bp-post-content h2:after{ display:none; }
}

/* Stacked header on tablets: a 4:5 portrait across the full column would run to
   ~1000px tall and swallow the fold, so widen the crop while it is full width. */
@media screen and (min-width:621px) and (max-width:980px){
	.bp-split-media-inner img{ aspect-ratio:16/9; }
}

@media screen and (max-width:620px){
	.bp-post-content .alignleft,
	.bp-post-content .alignright{
		float:none;
		width:100%;
		margin:26px 0;
	}
	.bp-post-content .alignwide{ width:100%; }
	.bp-post-content blockquote{ padding:26px 22px 26px 52px; }
	.bp-split-media:after{ right:-10px; bottom:-10px; }
}

/* ---------- Post footer: tags + share ---------- */
/* These lists live inside .la-content, whose <ul> rule draws an accent square
   before every item; suppress it for the icon and tag rows. */
.bp-post-content .bp-share ul,
.bp-post-content .bp-tags ul{ margin:0; padding:0; }
.bp-post-content .bp-share ul li,
.bp-post-content .bp-tags ul li{ padding-left:0; margin:0; }
.bp-post-content .bp-share ul li:before,
.bp-post-content .bp-tags ul li:before{ display:none; content:none; }

.bp-post-foot{
	max-width:760px;
	margin:clamp(34px,4vw,48px) auto 0;
	padding-top:26px;
	border-top:1px solid var(--bp-line);
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:20px;
}
.bp-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.bp-tags-label{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--do-muted); }
.bp-tags a{
	display:inline-block;
	padding:6px 13px;
	border-radius:999px;
	background:rgba(20,20,30,.05);
	border:1px solid var(--bp-line);
	font-size:13px;
	color:var(--do-ink);
	text-decoration:none;
	transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.bp-tags a:hover{ background:var(--do-accent); border-color:var(--do-accent); color:#fff; }

.bp-share{ display:flex; align-items:center; gap:12px; }
.bp-share-label{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--do-muted); }
.bp-share ul{ display:flex; gap:9px; list-style:none; margin:0; padding:0; }
.bp-share li{ margin:0; }
.bp-share a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px; height:44px;
	border-radius:50%;
	background:#fff;
	border:1px solid var(--bp-line);
	color:var(--do-ink);
	font-size:15px;
	text-decoration:none;
	transition:background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}
.bp-share a:hover{ background:var(--do-accent); border-color:var(--do-accent); color:#fff; transform:translateY(-3px); }

/* ---------- Previous / next ---------- */
.bp-postnav{
	max-width:760px;
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
	gap:16px;
	margin:clamp(34px,4vw,48px) auto 0;
}
.bp-postnav-link{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:22px 24px;
	border-radius:16px;
	background:#fff;
	border:1px solid var(--bp-line);
	text-decoration:none;
	transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.bp-postnav-link:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(20,20,30,.1); border-color:rgba(233,99,0,.3); }
.bp-postnav-link.is-next{ text-align:right; }
.bp-postnav-label{
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-size:11.5px;
	letter-spacing:.14em;
	text-transform:uppercase;
	font-weight:700;
	color:var(--do-accent);
}
.bp-postnav-link.is-next .bp-postnav-label{ justify-content:flex-end; }
.bp-postnav-label i{ transition:transform .35s ease; }
.bp-postnav-link.is-prev:hover .bp-postnav-label i{ transform:translateX(-4px); }
.bp-postnav-link.is-next:hover .bp-postnav-label i{ transform:translateX(4px); }
.bp-postnav-title{ font-size:16.5px; font-weight:700; line-height:1.4; color:var(--do-ink); }

/* ---------- Related ---------- */
.bp-related{ background:linear-gradient(180deg,#faf8f6 0%, #f4f1ee 100%); }
.bp-comments{ max-width:760px; margin:clamp(40px,5vw,60px) auto 0; }
.bp-comments input,
.bp-comments textarea,
.bp-comments select{ max-width:100%; box-sizing:border-box; }
.bp-comments textarea{ width:100%; }

/* ---------- Focus visibility (WCAG 2.1 AA) ---------- */
.blog-page a:focus-visible,
.blog-page button:focus-visible,
.blog-page input:focus-visible{
	outline:3px solid var(--do-accent);
	outline-offset:3px;
	border-radius:6px;
}

/* ---------- Responsive ---------- */
@media screen and (min-width:981px){
	/* Asymmetric split: image gets the wider column on desktop. */
	.bp-featured{ grid-template-columns:1.15fr 1fr; align-items:stretch; }
	.bp-featured-media{ aspect-ratio:auto; min-height:420px; }
}
@media screen and (max-width:980px){
	/* Stacked featured card: keep the image from eating the fold. */
	.bp-featured-media{ aspect-ratio:2/1; }
	/* Give the category rail its own full-width row above the search field. */
	.bp-toolbar{ gap:14px; }
	.bp-filters{ flex:1 1 100%; }
	.bp-search{ flex:1 1 100%; }
}
@media screen and (max-width:760px){
	.bp-rail{ grid-template-columns:1fr; }
}
@media screen and (max-width:520px){
	.bp-compact{ grid-template-columns:110px 1fr; gap:14px; padding:12px; }
	.bp-compact-excerpt{ display:none; }
	.bp-featured-foot{ flex-direction:column; align-items:flex-start; }
	.bp-featured-cta{ width:100%; }
	.bp-post-foot{ flex-direction:column; align-items:flex-start; }
	.bp-share{ flex-direction:column; align-items:flex-start; gap:10px; }
	.bp-postnav-link.is-next{ text-align:left; }
	.bp-postnav-link.is-next .bp-postnav-label{ justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce){
	.blog-page *,
	.blog-page *:before,
	.blog-page *:after{
		transition-duration:.01ms !important;
		animation-duration:.01ms !important;
	}
}