/* Axori Blog.
   List  = editorial index (this file owns the layout; projects.css only lends the chrome).
   Detail = project detail chrome (project.css) + the article typography at the bottom here.
   Tokens: --acc, --acc-l, --mono, --display, --sans, --ease. */

/* ================================================================
   LIST — chrome
   ================================================================ */
.bl-app > .brand,
.bl-app > .bl-head,
.bl-app > .axi-foot,
.bl-app > .axi-dock,
.bl-app > .axi-gear,
.bl-app > .axi-settings { z-index: 30; }

.bl-head {
	position: fixed;
	top: 28px;
	right: 40px;
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
	text-align: right;
}
.bl-h1 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(38px, 6vw, 76px);
	font-weight: 800;
	line-height: 0.85;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: rgb(var(--acc-l));
}
.bl-count {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.25em;
	color: rgb(var(--acc-l) / 0.35);
}

/* the page body doesn't scroll in these templates — this is the scroller */
.bl-scroll {
	position: fixed;
	inset: 0;
	z-index: 2;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	overscroll-behavior: contain;
}
.bl-scroll::-webkit-scrollbar { display: none; }

/* fades so the list passes under the fixed brand / title instead of colliding with them */
.bl-app::before,
.bl-app::after {
	content: '';
	position: fixed;
	left: 0;
	right: 0;
	z-index: 20;
	pointer-events: none;
}
.bl-app::before {
	top: 0;
	height: 150px;
	background: linear-gradient(180deg, var(--bg) 18%, transparent 100%);
}
.bl-app::after {
	bottom: 0;
	height: 110px;
	background: linear-gradient(0deg, var(--bg) 22%, transparent 100%);
}
@media (max-width: 1023px) {
	.bl-app::before { height: 120px; }
}
.bl-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(140px, 22vh, 230px) 40px 180px;
}

/* ---- left index rail (shares the projects-page chrome) ----
   The rail only appears once there is room for it beside the column, and the
   column is pushed clear of it rather than being overlapped. */
.axi-bl .pj-rail,
.axi-bl .pj-guides { display: none; }
@media (min-width: 1400px) {
	.axi-bl .bl-scroll { padding-left: 15rem; }
	.axi-bl .pj-rail { display: block; }
	/* there is more clearance here than on the projects page, so the titles
	   get a little more room before they are cut */
	.axi-bl .pj-index .t { display: block; max-width: 11rem; }
	.axi-bl .pj-guides { display: block; }
	/* the guides trace the column, which is centred in what is left of the
	   viewport once the rail has taken its 15rem */
	.axi-bl .pj-guides .gl-1 { left: calc(15rem + max(0px, (100vw - 15rem - 1180px) / 2) + 40px); }
	.axi-bl .pj-guides .gl-2 { left: auto; right: calc(max(0px, (100vw - 15rem - 1180px) / 2) + 40px); }
}
.axi-bl .pj-rail { z-index: 30; }

/* ================================================================
   LIST — the wide entry
   ================================================================ */
.bl-sep { color: rgb(var(--acc-l) / 0.2); }

/* The newest entry takes a wide cell at the head of the grid: the picture
   beside the writing instead of above it, and the title set large. It is the
   same card, so a filter can hide it like any other. */
@media (min-width: 900px) {
	.bl-cards[data-view='grid'] .bl-row-wide { grid-column: 1 / -1; }
	.bl-cards[data-view='grid'] .bl-row-wide .bl-card {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(2rem, 4vw, 4rem);
		padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
		border-bottom: 1px solid rgb(var(--acc-l) / 0.1);
	}
	.bl-cards[data-view='grid'] .bl-row-wide .bl-card-media { aspect-ratio: 16 / 11; }
	.bl-cards[data-view='grid'] .bl-row-wide .bl-card-link { font-size: clamp(28px, 3vw, 44px); }
	.bl-cards[data-view='grid'] .bl-row-wide .bl-card-text { font-size: 13.5px; }
}

/* ================================================================
   LIST — filter bar
   ================================================================ */
.bl-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 2.75rem 0 1.25rem;
}
.bl-bar-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	color: rgb(var(--acc-l) / 0.35);
}
.bl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.5rem; }
.bl-filters,
.bl-views { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* the button reset in home.css is `body.axi :where(button)` (0,1,1),
   so these need two classes to win */
.bl-filters .bl-chip {
	padding: 0.4rem 0.85rem;
	border: 1px solid rgb(var(--acc-l) / 0.14);
	font-family: var(--mono);
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: 0.2em;
	color: rgb(var(--acc-l) / 0.5);
	transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.bl-filters .bl-chip:hover { color: rgb(var(--acc-l)); border-color: rgb(var(--acc-l) / 0.4); }
.bl-filters .bl-chip.on {
	color: #000;
	background: rgb(var(--acc-l));
	border-color: rgb(var(--acc-l));
}

/* ---- layout switch ----
   Deliberately not a chip: filters are words in a row, this is two icons in one
   bordered well, so the two controls are not mistaken for each other. */
.bl-views {
	gap: 0;
	padding: 2px;
	border: 1px solid rgb(var(--acc-l) / 0.12);
	border-radius: 2px;
	background: rgb(var(--acc-l) / 0.03);
}
.bl-views .bl-vw {
	display: grid;
	place-items: center;
	width: 30px;
	height: 26px;
	border: 0;
	background: none;
	color: rgb(var(--acc-l) / 0.4);
	transition: color 0.3s, background 0.3s;
}
.bl-views .bl-vw svg { width: 13px; height: 13px; fill: currentColor; }
.bl-views .bl-vw:hover { color: rgb(var(--acc-l) / 0.8); }
.bl-views .bl-vw.on { color: #000; background: rgb(var(--acc-l)); }
.bl-views .bl-vw:focus-visible { outline: 1px solid rgb(var(--acc)); outline-offset: 1px; }
/* a finger needs more than 30px of target */
@media (hover: none), (pointer: coarse) {
	.bl-views .bl-vw { width: 42px; height: 34px; }
	.bl-views .bl-vw svg { width: 15px; height: 15px; }
}

/* .axi-sr (visually hidden label) lives in home.css, which every page loads */

/* ================================================================
   LIST — the cards
   Every entry carries its own picture, summary and button, so the page can be
   read without hovering anything. `data-view` on the <ul> switches the shape.
   ================================================================ */
.bl-cards {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bl-cards[data-view='grid'] { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.bl-cards[data-view='list'] { grid-template-columns: 1fr; gap: 0; }
.bl-row[hidden] { display: none; }

.bl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	height: 100%;
	transition: transform 0.6s var(--ease);
}
.bl-card:hover { transform: translateY(-4px); }
/* a wash lifts the card off the page as the pointer arrives, the same one the
   project rows use */
.bl-card::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -1.35rem -1.5rem;
	background: linear-gradient(160deg, rgb(var(--acc) / 0.08), rgb(var(--acc) / 0.02) 42%, transparent 72%);
	opacity: 0;
	transition: opacity 0.55s var(--ease);
	pointer-events: none;
}
.bl-card:hover::before { opacity: 1; }

.bl-card-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border: 1px solid rgb(var(--acc-l) / 0.14);
	background: rgb(var(--acc-l) / 0.02);
}
/* register marks at the corners — same instrument language as the rail */
.bl-card-media::before,
.bl-card-media::after {
	content: '';
	position: absolute;
	z-index: 4;
	width: 10px;
	height: 10px;
	opacity: 0;
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
	pointer-events: none;
}
.bl-card-media::before {
	top: 8px;
	left: 8px;
	border-top: 1px solid rgb(var(--acc));
	border-left: 1px solid rgb(var(--acc));
	transform: translate(-4px, -4px);
}
.bl-card-media::after {
	right: 8px;
	bottom: 8px;
	border-right: 1px solid rgb(var(--acc));
	border-bottom: 1px solid rgb(var(--acc));
	transform: translate(4px, 4px);
}
.bl-card:hover .bl-card-media::before,
.bl-card:hover .bl-card-media::after,
.bl-row.is-focus .bl-card-media::before,
.bl-row.is-focus .bl-card-media::after { opacity: 1; transform: none; }
.bl-row.is-focus .bl-card-media::before,
.bl-row.is-focus .bl-card-media::after { opacity: 0.45; }
/* The picture drifts inside its frame as the card crosses the screen — the
   index's own scroll effect, nothing like the drum on the projects page.
   `--par` is written per frame by blog.js; the extra scale gives the drift
   somewhere to go without ever exposing an edge. */
.bl-card-media img,
.bl-card-media .bl-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transform: translate3d(0, var(--par, 0%), 0) scale(1.16);
	transition: filter 0.7s var(--ease);
	will-change: transform;
}
.bl-card:hover .bl-card-media img,
.bl-card:hover .bl-card-media .bl-ph { filter: grayscale(0) contrast(1); }

/* the entry number, kept from the old index so the archive still reads as one */
.bl-card-i {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 0.4rem 0.6rem;
	background: var(--bg);
	border-right: 1px solid rgb(var(--acc-l) / 0.14);
	border-bottom: 1px solid rgb(var(--acc-l) / 0.14);
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.2em;
	color: rgb(var(--acc-l) / 0.4);
	transition: color 0.4s;
}
.bl-card:hover .bl-card-i { color: rgb(var(--acc)); }

/* grows so `margin-top:auto` on the button lines the CTAs up across a row */
.bl-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.85rem; min-width: 0; }
.bl-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.4);
}
.bl-card-cat { color: rgb(var(--acc) / 0.85); }

.bl-card-title { margin: 0; }
.bl-card-link {
	font-family: var(--display);
	font-size: clamp(22px, 2.1vw, 30px);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.9);
	transition: color 0.4s;
}
/* stretched hit area: whole card clickable, still one tab stop and one link name */
.bl-card-link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.bl-card:hover .bl-card-link { color: #fff; }
.bl-card-link:focus-visible { outline: 2px solid rgb(var(--acc)); outline-offset: 4px; }

.bl-card-text {
	margin: 0;
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.85;
	color: rgb(var(--acc-l) / 0.55);
}

/* a quiet text affordance rather than a filled button, so the pictures and the
   titles carry the page — the arrow does the acknowledging */
.bl-card-cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 1.1rem;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.3);
	transition: color 0.45s var(--ease);
}
.bl-card-cta i { font-style: normal; transition: transform 0.5s var(--ease); }
.bl-card:hover .bl-card-cta { color: rgb(var(--acc)); }
.bl-card:hover .bl-card-cta i { transform: translateX(5px); }
.bl-row.is-focus .bl-card-cta { color: rgb(var(--acc-l) / 0.55); }

/* the entry nearest the middle of the screen is picked out, so the archive
   always has a subject — the same behaviour as the project drum */
.bl-row.is-focus .bl-card-media img,
.bl-row.is-focus .bl-card-media .bl-ph { filter: grayscale(0.7) contrast(1.05); }
.bl-row.is-focus .bl-card-i { color: rgb(var(--acc)); }

/* ---- list view: picture beside the text ---- */
.bl-cards[data-view='list'] .bl-row { border-top: 1px solid rgb(var(--acc-l) / 0.1); }
.bl-cards[data-view='list'] .bl-row:last-child { border-bottom: 1px solid rgb(var(--acc-l) / 0.1); }
.bl-cards[data-view='list'] .bl-card {
	flex-direction: row;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 2.5vw, 2.25rem) 0;
}
.bl-cards[data-view='list'] .bl-card-media { flex: 0 0 clamp(190px, 26%, 320px); aspect-ratio: 4 / 3; }
.bl-cards[data-view='list'] .bl-card-text { max-width: 62ch; }
.bl-cards[data-view='list'] .bl-card:hover { transform: none; }
@media (min-width: 1024px) {
	.bl-cards[data-view='list'] .bl-card-link { font-size: clamp(24px, 2.6vw, 38px); }
	.bl-cards[data-view='list'] .bl-card-cta { margin-top: 0.35rem; }
}

/* scroll-reveal for the rows */
.bl-row {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
	transition-delay: calc(var(--k, 0) * 55ms);
}
.bl-row.in { opacity: 1; transform: none; }

.bl-inner .bl-empty,
.bl-inner .bl-end {
	margin: 3.5rem 0 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-align: center;
	color: rgb(var(--acc-l) / 0.25);
}
/* the sign-off needs room to read as a closing rule, not as another row */
.bl-inner .bl-end { margin-top: clamp(4.5rem, 8vw, 7rem); }
.bl-inner .bl-solo { margin-top: 7rem; }

/* generated artwork when a post has no featured image */
.bl-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(0deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 14px),
		linear-gradient(140deg, hsl(var(--h, 0) 55% 22%), #000 75%);
}
.bl-ph > span {
	padding: 0 12px;
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	color: rgb(255 255 255 / 0.75);
}

/* ================================================================
   LIST — narrower screens
   ================================================================ */
@media (max-width: 1023px) {
	.bl-head { top: 20px; right: 16px; }
	.bl-inner { padding: clamp(120px, 20vh, 180px) 16px 160px; }
	.bl-lead { grid-template-columns: 1fr; gap: 1.75rem; }
	.bl-lead-media { aspect-ratio: 16 / 10; }
	/* one column either way on a phone — a 300px card beside another is unreadable */
	.bl-cards[data-view='grid'] { grid-template-columns: 1fr; }
	.bl-cards[data-view='list'] .bl-card { flex-direction: column; align-items: stretch; }
	.bl-cards[data-view='list'] .bl-card-media { flex: none; aspect-ratio: 16 / 10; }
}

/* ================================================================
   DETAIL — the article body
   ================================================================ */
/* Long-form body text is set in the sans face, not the mono one: mono is right for
   labels and dossier values but slows down paragraph reading badly. */
.bl-article {
	/* the reading column sets the width now (--bd-col), so the article
	   follows it instead of stopping at a fixed 42rem; the ch cap keeps
	   the longest lines trackable on a wide screen */
	max-width: 78ch;
	margin: 0 0 3rem;
	font-family: var(--sans);
	font-size: clamp(16.5px, 0.5vw + 15px, 19px);
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: 0;
	color: rgb(var(--acc-l) / 0.78);
}
.bl-article > :first-child { margin-top: 0; }
.bl-article > :last-child { margin-bottom: 0; }

/* `body.axi :where(p)` (0,1,1) zeroes single-class paragraph rules — hence the two classes */
.bl-article > p,
.bl-article li > p { margin: 0 0 1.45em; }
/* the opening paragraph carries a little more weight, so the article has an entry point */
.bl-article > p:first-of-type { font-size: 19px; line-height: 1.7; color: rgb(var(--acc-l) / 0.9); }

.bl-article h2,
.bl-article h3,
.bl-article h4 {
	margin: 3rem 0 1rem;
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: rgb(var(--acc-l));
	scroll-margin-top: 140px; /* the page index jumps inside #pd-scroll */
}
.bl-article h2 { font-size: 34px; }
.bl-article h3 { font-size: 24px; }
.bl-article h4 { font-size: 18px; }

.bl-article h2 {
	padding-top: 1.75rem;
	border-top: 1px solid rgb(var(--acc-l) / 0.12);
}

.bl-article a {
	color: rgb(var(--acc-l));
	text-decoration: none;
	border-bottom: 1px solid rgb(var(--acc) / 0.45);
	transition: border-color 0.3s, color 0.3s;
}
.bl-article a:hover { color: #fff; border-color: rgb(var(--acc)); }

.bl-article strong, .bl-article b { font-weight: 700; color: rgb(var(--acc-l) / 0.9); }
.bl-article em, .bl-article i { font-style: italic; }

.bl-article ul,
.bl-article ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.bl-article li { margin-bottom: 0.5rem; }
.bl-article ul { list-style: none; padding-left: 1.25rem; }
.bl-article ul > li { position: relative; }
.bl-article ul > li::before {
	content: '';
	position: absolute;
	top: 0.9em;
	left: -1.25rem;
	width: 6px;
	height: 1px;
	background: rgb(var(--acc));
}

.bl-article blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 1px solid rgb(var(--acc) / 0.5);
	font-size: 16px;
	line-height: 1.7;
	color: rgb(var(--acc-l) / 0.85);
}
.bl-article blockquote p:last-child { margin-bottom: 0; }

.bl-article code {
	padding: 0.15em 0.4em;
	border: 1px solid rgb(var(--acc-l) / 0.14);
	border-radius: 2px;
	background: rgb(var(--acc-l) / 0.04);
	font-family: var(--mono);
	font-size: 0.9em;
	color: rgb(var(--acc-l) / 0.9);
}
.bl-article pre {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	overflow-x: auto;
	border: 1px solid rgb(var(--acc-l) / 0.12);
	background: rgb(var(--acc-l) / 0.03);
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: 0;
}
.bl-article pre code { padding: 0; border: 0; background: none; }

.bl-article hr {
	margin: 3rem 0;
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, rgb(var(--acc) / 0.5), transparent);
}

.bl-article img,
.bl-article iframe,
.bl-article video {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 2rem 0;
	border: 1px solid rgb(var(--acc-l) / 0.12);
}
.bl-article figure { margin: 2rem 0; }
.bl-article figure img { margin: 0; }
.bl-article figcaption {
	margin-top: 0.75rem;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.4);
}

.bl-article table {
	width: 100%;
	margin: 0 0 1.5rem;
	border-collapse: collapse;
	font-size: 12px;
}
.bl-article th,
.bl-article td {
	padding: 0.65rem 0.75rem;
	border: 1px solid rgb(var(--acc-l) / 0.12);
	text-align: left;
}
.bl-article th {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.55);
}

/* ================================================================
   DETAIL — the reading page
   Where a project is a wide, image-led case study, a post is a single
   centred column: masthead, cover, article. Nothing is fixed over the
   text except a slim reading bar, so the measure never has to dodge a
   96px title parked in the corner.
   ================================================================ */
/* Fluid reading measure: it grows with the viewport between a comfortable
   minimum and a ceiling where lines would get too long to track. */
.axi-bd {
	--bd-col: clamp(20rem, 54vw, 62rem);
	--bd-wide: clamp(22rem, 70vw, 82rem);   /* cover, pager, related */
	--bd-pad: clamp(1.15rem, 3vw, 2.5rem);
}

/* the shared chrome this layout replaces */
.axi-bd .pd-titlegroup,
.axi-bd .pd-progress,
.axi-bd .pd-marquee,
.axi-bd .pd-pill { display: none !important; }

/* The bar spans the full width, so the wordmark sits on top of its glass —
   and is centred against the bar's own height rather than keeping the
   corner offset it uses on pages with no bar. */
.axi-bd .pj-brand {
	z-index: 31;
	top: 0;
	display: flex;
	align-items: center;
	height: 54px;
}

/* ---- reading bar ---- */
.bd-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	height: 54px;
	padding: 0 1.25rem 0 clamp(7rem, 12vw, 11rem);
	border-bottom: 1px solid rgb(var(--acc-l) / 0.1);
	background: rgb(var(--bg) / 0.72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.axi-bd a.bd-bar-back,
.bd-bar-read {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.55);
	transition: color 0.3s, gap 0.4s var(--ease);
}
.axi-bd a.bd-bar-back:hover { gap: 0.85rem; color: rgb(var(--acc-l)); }
/* the title only joins the bar once the masthead has scrolled away */
.bd-bar-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-family: var(--slab);
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgb(var(--acc-l) / 0.85);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.35s, transform 0.35s var(--ease);
}
.bd-bar.is-in .bd-bar-title { opacity: 1; transform: none; }
.bd-bar-rail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	overflow: hidden;
}
.bd-bar-rail i {
	display: block;
	height: 100%;
	background: rgb(var(--acc));
	box-shadow: 0 0 10px rgb(var(--acc) / 0.7);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ---- masthead ---- */
.bd-head {
	max-width: var(--bd-col);
	margin: 0 auto;
	padding: 9rem var(--bd-pad) 0;
}
.axi-bd .bd-crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2.25rem;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.35);
}
.axi-bd .bd-crumb a { color: rgb(var(--acc-l) / 0.55); }
.axi-bd .bd-crumb a:hover { color: rgb(var(--acc-l)); }
.axi-bd .bd-kicker { margin: 0 0 1.1rem !important; }
.bd-kicker span {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	border: 1px solid rgb(var(--acc) / 0.35);
	background: rgb(var(--acc) / 0.08);
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.85);
}
.bd-title {
	margin: 0 0 1.35rem;
	font-family: var(--slab);
	font-size: clamp(32px, 4.6vw, 54px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: rgb(var(--acc-l));
}
.axi-bd p.bd-lede {
	max-width: 68ch;
	margin: 0 0 2.25rem !important;
	font-family: var(--sans);
	font-size: clamp(17px, 0.5vw + 16px, 21px);
	line-height: 1.65;
	color: rgb(var(--acc-l) / 0.62);
}

/* ---- byline ---- */
.bd-byline {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.15rem 0;
	border-top: 1px solid rgb(var(--acc-l) / 0.12);
	border-bottom: 1px solid rgb(var(--acc-l) / 0.12);
}
.bd-avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid rgb(var(--acc) / 0.4);
	border-radius: 50%;
	background: rgb(var(--acc) / 0.1);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	color: rgb(var(--acc-l));
}
.bd-by-who { display: flex; flex-direction: column; gap: 3px; margin-right: auto; min-width: 0; }
.bd-by-who b { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--acc-l) / 0.9); }
.bd-by-who > span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--acc-l) / 0.4); }
.bd-by-who i { margin: 0 0.5rem; font-style: normal; }

/* ---- cover ---- */
.bd-cover {
	max-width: var(--bd-wide);
	margin: 3rem auto 0;
	padding: 0 var(--bd-pad);
}
.bd-cover-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid rgb(var(--acc-l) / 0.12);
	background: none;
	cursor: zoom-in;
}
.bd-cover-btn img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* Blog pictures print black and white, like the portrait heroes — colour
   only comes back under the cursor, so the page stays monochrome at rest. */
.axi-bl .bd-cover-btn img,
.axi-bl .bl-article img,
.axi-bl .bl-card-media img,
.axi-bl .bl-lead-media img {
	filter: grayscale(1) contrast(1.04);
	transition: filter 0.5s var(--ease);
}
/* colour returns on the thing you are pointing at */
.axi-bl .bd-cover-btn:hover img,
.axi-bl .bl-card:hover .bl-card-media img,
.axi-bl .bl-lead:hover .bl-lead-media img { filter: grayscale(0) contrast(1); }
.axi-bd .bd-cover figcaption {
	margin-top: 0.7rem;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.32);
}

.bd-layout {
	display: grid;
	gap: 2.5rem;
	max-width: var(--bd-col);
	margin: 0 auto;
	padding: 3.5rem var(--bd-pad) 0;
}
.bd-main { min-width: 0; }

/* ---- tags at the foot of the article ---- */
.bd-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	/* the chips sat flush against the rule the next block draws */
	margin: 2.5rem 0 1.5rem;
	padding-top: 2rem;
	border-top: 1px solid rgb(var(--acc-l) / 0.12);
}
.bd-tags-k {
	margin-right: 0.4rem;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.4);
}
.bd-tags-l { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- author card ---- */
.bd-auth {
	display: flex;
	gap: 1.1rem;
	margin: 2.5rem 0 0;
	padding: 1.5rem 1.5rem 1.6rem;
	border: 1px solid rgb(var(--acc-l) / 0.14);
	background: rgb(var(--acc) / 0.03);
}
.bd-auth-av {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgb(var(--acc) / 0.4);
	border-radius: 50%;
	background: rgb(var(--acc) / 0.1);
	font-family: var(--mono);
	font-size: 15px;
	font-weight: 700;
	color: rgb(var(--acc-l));
}
.bd-auth-b { min-width: 0; }
.bd-auth-k {
	display: block;
	margin-bottom: 0.3rem;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.4);
}
.bd-auth-n { display: block; font-family: var(--slab); font-size: 18px; color: rgb(var(--acc-l) / 0.95); }
.axi-bd p.bd-auth-d {
	max-width: 62ch;
	margin: 0.6rem 0 0 !important;
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.7;
	color: rgb(var(--acc-l) / 0.55);
}
.axi-bd a.bd-auth-l {
	display: inline-flex;
	gap: 0.5rem;
	margin-top: 0.85rem;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.7);
	transition: color 0.3s, gap 0.4s var(--ease);
}
.axi-bd a.bd-auth-l:hover { gap: 0.9rem; color: rgb(var(--acc-l)); }

/* ---- the thread ---- */
.bd-talk { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgb(var(--acc-l) / 0.12); }
.bd-talk-h {
	margin: 0 0 1.5rem;
	font-family: var(--display);
	font-size: clamp(22px, 2vw, 30px);
	font-weight: 700;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.95);
}
.bd-talk-l, .bd-talk-l .children { margin: 0 0 2.5rem; padding: 0; list-style: none; }
.bd-talk-l .children { margin: 1rem 0 0 1.5rem; padding-left: 1.25rem; border-left: 1px solid rgb(var(--acc-l) / 0.12); }
.bd-c { padding: 1.25rem 0; border-bottom: 1px dashed rgb(var(--acc-l) / 0.12); }
.bd-c:last-child { border-bottom: 0; }
.bd-c-h { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.7rem; }
.bd-c-av {
	display: grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border: 1px solid rgb(var(--acc-l) / 0.2);
	border-radius: 50%;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	color: rgb(var(--acc-l) / 0.8);
}
.bd-c-who { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.bd-c-who b { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--acc-l) / 0.9); }
.bd-c-who time { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--acc-l) / 0.35); }
.axi-bd .bd-c-reply a {
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.5);
}
.axi-bd .bd-c-reply a:hover { color: rgb(var(--acc)); }
.axi-bd .bd-c-b p { margin: 0 0 0.8em !important; font-family: var(--sans); font-size: 15.5px; line-height: 1.75; color: rgb(var(--acc-l) / 0.72); }
.axi-bd .bd-c-b p:last-child { margin-bottom: 0 !important; }
.axi-bd p.bd-c-wait { margin: 0.5rem 0 0 !important; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--acc) / 0.8); }

/* ---- leave a reply ---- */
.axi-bd p.bd-form-note,
.axi-bd .bd-form .logged-in-as {
	margin: 0 0 1.5rem !important;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.35);
}
.axi-bd .bd-field { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.1rem !important; }
.axi-bd .bd-field label {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.45);
}
.axi-bd .bd-field input,
.axi-bd .bd-field textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgb(var(--acc-l) / 0.16);
	border-radius: 0;
	background: rgb(var(--acc-l) / 0.03);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	color: rgb(var(--acc-l) / 0.92);
	transition: border-color 0.3s, background 0.3s;
}
.axi-bd .bd-field textarea { resize: vertical; min-height: 9rem; }
.axi-bd .bd-field input:focus,
.axi-bd .bd-field textarea:focus {
	outline: none;
	border-color: rgb(var(--acc) / 0.6);
	background: rgb(var(--acc) / 0.06);
}
.axi-bd .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.25rem !important;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	color: rgb(var(--acc-l) / 0.45);
}
.axi-bd .bd-form-send {
	padding: 0.95rem 1.6rem;
	border: 1px solid rgb(var(--acc-l));
	background: rgb(var(--acc-l));
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #000;
	cursor: pointer;
	transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.axi-bd .bd-form-send:hover { color: rgb(var(--acc-l)); background: rgb(var(--acc) / 0.1); border-color: rgb(var(--acc) / 0.6); }

@media (min-width: 640px) {
	/* name and email share a row; the comment box keeps the full width */
	.axi-bd .bd-field-half { display: inline-flex; width: calc(50% - 0.55rem); vertical-align: top; }
	.axi-bd .comment-form-author.bd-field-half { margin-right: 1rem !important; }
}

/* ---- pager: previous and next, side by side ---- */
.bd-pager {
	display: grid;
	gap: 1rem;
	max-width: var(--bd-wide);
	margin: 0 auto;
	padding: 5rem var(--bd-pad) 7rem;
}
.axi-bd a.bd-pager-c {
	display: block;
	padding: 1.5rem 1.5rem 1.6rem;
	border: 1px solid rgb(var(--acc-l) / 0.14);
	background: rgb(var(--acc) / 0.03);
	transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease);
}
.axi-bd a.bd-pager-c:hover { border-color: rgb(var(--acc) / 0.45); background: rgb(var(--acc) / 0.08); transform: translateY(-3px); }
.bd-pager-next { text-align: right; }
.bd-pager-k {
	display: block;
	margin-bottom: 0.7rem;
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgb(var(--acc) / 0.9);
}
.bd-pager-t { display: block; font-family: var(--slab); font-size: 19px; line-height: 1.3; color: rgb(var(--acc-l) / 0.95); }
.bd-pager-d {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.6rem;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	color: rgb(var(--acc-l) / 0.45);
}

@media (min-width: 768px) {
	.bd-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
	/* a lone "next" keeps to the right-hand half, so the pair always reads
	   as previous-left / next-right */
	.bd-pager .bd-pager-next:only-child { grid-column: 2; }
}
@media (max-width: 767px) {
	.axi-bd { --bd-pad: 1.15rem; }
	.bd-head { padding-top: 6.5rem; }
	.bd-bar { padding-left: 1.15rem; height: 48px; }
	.bd-bar-back span { display: none; }
	.bd-bar-read { display: none; }
	.bd-cover-btn img { aspect-ratio: 16 / 10; }
	.bd-byline { flex-wrap: wrap; }
	.bd-byline .bd-share { width: 100%; }
}

.bd-side-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.35);
}

/* current section, set by blog.js while scrolling */
.bd-index a.is-now { color: rgb(var(--acc)); }

/* ---- share row (in the byline) ---- */
.bd-share { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.axi-bd .bd-share-b {
	padding: 0.4rem 0.8rem;
	border: 1px solid rgb(var(--acc-l) / 0.16);
	background: rgb(var(--acc-l) / 0.04);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.75);
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.axi-bd .bd-share-b:hover { color: rgb(var(--acc-l)); border-color: rgb(var(--acc) / 0.5); background: rgb(var(--acc) / 0.1); }
.axi-bd .bd-share-b.is-done { color: #000; background: rgb(var(--acc-l)); border-color: rgb(var(--acc-l)); }

/* ---- after the article ---- */
.bd-after {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1rem;
	padding-top: 2.25rem;
	border-top: 1px solid rgb(var(--acc-l) / 0.12);
}
.bd-after .bd-back-link,
.bd-after .bd-top {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1.15rem;
	border: 1px solid rgb(var(--acc-l) / 0.2);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.8);
	transition: color 0.3s, border-color 0.3s, background 0.3s, gap 0.4s var(--ease);
}
.bd-after .bd-back-link:hover {
	gap: 1rem;
	color: #000;
	background: rgb(var(--acc-l));
	border-color: rgb(var(--acc-l));
}
.bd-after .bd-top:hover { color: rgb(var(--acc-l)); border-color: rgb(var(--acc-l) / 0.45); }

@media (min-width: 1100px) {
	/* the contents rail hangs in the left margin; the reading column itself
	   stays the same width it is everywhere else on the page */
	.bd-layout {
		grid-template-columns: 13rem var(--bd-col);
		justify-content: center;
		gap: 3.5rem;
		max-width: none;
		padding: 4rem 1.5rem 0;
	}
	.bd-side-in { position: sticky; top: 8rem; transition: opacity 0.4s var(--ease); }
	.bd-side-in.is-done { opacity: 0; pointer-events: none; }
}
@media (max-width: 1099px) {
	/* the rail becomes a contents block above the article */
	.bd-side-in {
		padding: 1.15rem 1.25rem;
		border: 1px solid rgb(var(--acc-l) / 0.12);
	}
	.bd-side-meta { margin-top: 1rem; }
}
@media (max-width: 1023px) {
	.bl-article { font-size: 16px; }
	.bl-article > p:first-of-type { font-size: 17px; }
	.bl-article h2 { font-size: 27px; }
	.bl-article h3 { font-size: 21px; }
}