/* ==========================================================================
   Bojagi — seoultourism.org
   --------------------------------------------------------------------------
   01  Fonts
   02  Tokens
   03  Reset and base
   04  Layout primitives
   05  Header, nav, mobile sheet
   06  Footer
   07  Buttons, chips, pills, badges
   08  Cards and coloured tiles
   09  Image wells
   10  Ad trays
   11  Home
   12  Pillar
   13  Article
   14  Prose (the_content)
   15  Archive and search
   16  Pages and trust
   17  Comments
   18  Utility, print, motion
   ========================================================================== */

/* 01  Fonts ============================================================== */

/* Rubik and Nunito Sans ship as variable faces clamped to the weight range the
   design uses; DM Mono ships as two static instances. Only latin and latin-ext
   are bundled — a Korean face would cost megabytes and the only Korean in the
   design is the optional monogram tile, which falls back to the system stack. */

@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/rubik-400-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/rubik-400-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Nunito Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/nunitosans-400-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Nunito Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/nunitosans-400-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dmmono400-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dmmono400-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dmmono500-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dmmono500-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 02  Tokens ============================================================= */

/*
	Four patchwork colours, each with its own dark ink. Text on a coloured block
	always uses that block's ink — never white. Two values differ from the comp,
	both because the comp value failed WCAG AA as text:

	  --bj-placeholder   comp #7a6451 scored 4.15 on the darker stripe of the
	                     image-well weave. Darkened to #6b5647 (4.80).
	  --bj-on-ink-dim    the comp set the footer legal row in --bj-meta #8c685c,
	                     which is 2.96 on ink. Replaced with #c3b6a8 (7.37), the
	                     value the comp already uses for footer body copy.

	Both comp values survive unchanged everywhere they are used as a fill rather
	than as text.
*/

:root {
	/* Patchwork */
	--bj-clay: #d78f85;
	--bj-clay-ink: #401d18;
	--bj-clay-eyebrow: #51231b;
	--bj-clay-body: #47211a;

	--bj-sand: #e5cea5;
	--bj-sand-ink: #31200e;
	--bj-sand-eyebrow: #5c4221;
	--bj-sand-body: #5c4935;

	--bj-sage: #a2c69d;
	--bj-sage-ink: #132a14;
	--bj-sage-eyebrow: #2c442d;
	--bj-sage-body: #2c442d;

	--bj-mauve: #9c95be;
	--bj-mauve-ink: #27223d;
	--bj-mauve-eyebrow: #2e2847;
	--bj-mauve-body: #2e2847;

	/* Neutrals */
	--bj-paper: #f9f6f0;
	--bj-surface: #ffffff;
	--bj-rail: #ece7de;
	--bj-rail-2: #e1dacc;
	--bj-rail-3: #eeebe4;
	--bj-ink: #30271f;
	--bj-ink-hover: #40362e;
	--bj-body: #40362e;
	--bj-body-2: #5b5048;
	--bj-body-3: #645850;
	--bj-meta: #8c685c;
	--bj-placeholder: #6b5647;
	--bj-chip-text: #453b33;
	--bj-chip-mono: #625245;
	--bj-ad-label: #706052;
	--bj-on-ink: #f9f6f0;
	--bj-on-ink-soft: #eeebe4;
	--bj-on-ink-dim: #c3b6a8;

	/* Image-well weave */
	--bj-weave-dark: #e5ddd0;
	--bj-weave-light: #f2eee6;

	/* Borders */
	--bj-hair: rgba(48, 39, 31, 0.08);
	--bj-line: rgba(48, 39, 31, 0.1);
	--bj-rule: rgba(48, 39, 31, 0.12);
	--bj-edge: rgba(48, 39, 31, 0.18);
	--bj-edge-2: rgba(48, 39, 31, 0.2);
	--bj-hair-ink: rgba(255, 255, 255, 0.14);
	--bj-veil: rgba(255, 255, 255, 0.55);
	--bj-veil-2: rgba(255, 255, 255, 0.5);

	/* Type */
	--bj-display: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bj-text: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bj-mono: "DM Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Radius */
	--bj-r-chip: 12px;
	--bj-r-tile: 16px;
	--bj-r-card: 18px;
	--bj-r-lg: 20px;
	--bj-r-hero: 26px;
	--bj-r-pill: 999px;

	/* Space */
	--bj-s1: 8px;
	--bj-s2: 16px;
	--bj-s3: 18px;
	--bj-s4: 22px;
	--bj-s5: 34px;
	--bj-s6: 44px;

	--bj-gutter: 18px;
	--bj-pad: 44px;
	--bj-max: 1280px;
	--bj-measure: 720px;
	--bj-rail-w: 300px;
	--bj-col-gap: 38px;
	--bj-section: 32px;

	/* Chrome */
	--bj-header-h: 81px;
	--bj-progress-h: 3px;
	--bj-ease: 150ms ease-out;
}

/* 03  Reset and base ===================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bj-paper);
	color: var(--bj-body);
	font-family: var(--bj-text);
	font-size: 17px;
	line-height: 1.72;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/*
	Iframes get max-width but never height:auto — an iframe has no intrinsic
	aspect ratio, so height:auto collapses it to the 150px default and every
	embed loses its picture. Embeds are given a ratio instead.
*/
iframe {
	max-width: 100%;
}

.wp-block-embed iframe,
.bj-prose iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: var(--bj-r-lg);
}

.wp-block-embed__wrapper {
	position: relative;
}

/* Vertical and square providers keep their own shape. */
.wp-embed-aspect-1-1 .wp-block-embed__wrapper iframe {
	aspect-ratio: 1 / 1;
}

.wp-embed-aspect-4-3 .wp-block-embed__wrapper iframe {
	aspect-ratio: 4 / 3;
}

.wp-embed-aspect-9-16 .wp-block-embed__wrapper iframe {
	aspect-ratio: 9 / 16;
}

img {
	display: block;
}

a {
	color: var(--bj-meta);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--bj-clay-eyebrow);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--bj-display);
	font-weight: 600;
	color: var(--bj-ink);
	letter-spacing: -0.035em;
	text-wrap: pretty;
	margin: 0;
}

p {
	margin: 0;
	text-wrap: pretty;
}

ul,
ol {
	margin: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--bj-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

/* On a coloured block or the ink footer a dark ring disappears; flip it. */
.bj-tile :focus-visible,
.bj-hero-block :focus-visible,
.bj-band :focus-visible,
.bj-site-footer :focus-visible,
.bj-contact-card :focus-visible,
.bj-listcard__head :focus-visible {
	outline-color: currentColor;
}

.bj-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 20px;
	background: var(--bj-ink);
	color: var(--bj-on-ink);
	font-family: var(--bj-display);
	font-size: 14px;
	font-weight: 500;
	border-radius: 0 0 var(--bj-r-chip) 0;
}

.bj-skip:focus {
	left: 0;
	color: var(--bj-on-ink);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 12px 20px;
	position: static;
}

/* 04  Layout primitives ================================================== */

.bj-shell {
	width: 100%;
	max-width: var(--bj-max);
	margin-inline: auto;
	padding-inline: var(--bj-pad);
}

.bj-shell--narrow {
	max-width: calc(920px + var(--bj-pad) * 2);
}

.bj-section {
	margin-top: var(--bj-section);
}

.bj-section:first-child {
	margin-top: var(--bj-s5);
}

.bj-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bj-s4);
	margin-bottom: var(--bj-gutter);
	flex-wrap: wrap;
}

.bj-section-head h2 {
	font-size: 26px;
	line-height: 1.2;
}

.bj-morelink {
	font-family: var(--bj-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bj-meta);
	text-decoration: none;
	white-space: nowrap;
}

.bj-morelink:hover {
	text-decoration: underline;
}

.bj-eyebrow {
	font-family: var(--bj-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bj-meta);
	margin: 0;
}

.bj-grid {
	display: grid;
	gap: var(--bj-gutter);
}

.bj-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bj-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bj-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Two-column body: content + 300px rail. */
.bj-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--bj-rail-w);
	gap: var(--bj-col-gap);
	align-items: start;
	padding-block: var(--bj-s5) var(--bj-s6);
}

.bj-columns__main {
	min-width: 0;
}

.bj-columns__rail {
	display: flex;
	flex-direction: column;
	gap: var(--bj-s3);
	min-width: 0;
}

.bj-rule {
	border: 0;
	border-top: 1px solid var(--bj-rule);
	margin: 0;
}

/* 05  Header ============================================================= */

.bj-site-header {
	background: var(--bj-surface);
	border-bottom: 1px solid var(--bj-hair);
}

.bj-masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bj-s4);
	padding-block: 20px;
}

.bj-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	min-width: 0;
}

.bj-brand__mark {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	flex: none;
}

.bj-brand__mark span {
	display: block;
}

.bj-brand__mark span:nth-child(1) {
	background: var(--bj-clay);
}

.bj-brand__mark span:nth-child(2) {
	background: var(--bj-sand);
}

.bj-brand__mark span:nth-child(3) {
	background: var(--bj-sage);
}

.bj-brand__mark span:nth-child(4) {
	background: var(--bj-mauve);
}

.bj-brand__mark img {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bj-brand__name {
	font-family: var(--bj-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--bj-ink);
}

.bj-brand__tagline {
	display: block;
	font-family: var(--bj-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bj-meta);
	margin-top: 7px;
}

.bj-nav {
	display: flex;
	align-items: center;
	gap: 26px;
}

.bj-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bj-nav__list a {
	font-family: var(--bj-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2;
	color: var(--bj-chip-text);
	text-decoration: none;
	display: block;
	padding-block: 4px;
}

.bj-nav__list a:hover {
	color: var(--bj-ink);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.bj-nav__list .current-menu-item > a,
.bj-nav__list .current_page_item > a,
.bj-nav__list .current-menu-ancestor > a {
	color: var(--bj-ink);
	font-weight: 500;
}

/* Sub-menus stay on one level; the design has no dropdown, so children are
   folded into the mobile sheet and hidden on desktop rather than invented. */
.bj-nav__list .sub-menu {
	display: none;
}

.bj-search-pill {
	padding: 9px 18px;
	border-radius: var(--bj-r-pill);
	background: var(--bj-rail);
	font-family: var(--bj-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bj-chip-mono);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--bj-ease);
}

.bj-search-pill:hover {
	background: var(--bj-rail-2);
	color: var(--bj-chip-mono);
}

.bj-burger {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 4px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--bj-mono);
	font-size: 8.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bj-meta);
}

/* Mobile sheet */
.bj-sheet {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: var(--bj-paper);
	padding: var(--bj-s3);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bj-sheet[hidden] {
	display: none;
}

.bj-sheet__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bj-s2);
	padding-bottom: var(--bj-s3);
	border-bottom: 1px solid var(--bj-rule);
}

.bj-sheet__close {
	min-height: 44px;
	min-width: 44px;
	padding: 0 14px;
	border-radius: var(--bj-r-pill);
	border: 1px solid var(--bj-edge);
	background: var(--bj-surface);
	font-family: var(--bj-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bj-chip-mono);
	cursor: pointer;
}

.bj-sheet__list {
	list-style: none;
	margin: var(--bj-s3) 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.bj-sheet__list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--bj-r-pill);
	background: var(--bj-rail);
	font-family: var(--bj-display);
	font-size: 15px;
	color: var(--bj-chip-text);
	text-decoration: none;
}

.bj-sheet__list .sub-menu {
	list-style: none;
	margin: 6px 0 0 var(--bj-s2);
	padding: 0;
	display: grid;
	gap: 6px;
}

.bj-sheet__list .current-menu-item > a {
	background: var(--bj-ink);
	color: var(--bj-on-ink);
	font-weight: 500;
}

.bj-sheet__search {
	margin-top: var(--bj-s3);
}

/* Bottom nav — persistent three-up on phones */
.bj-bottomnav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 110;
	gap: 6px;
	padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
	background: var(--bj-surface);
	border-top: 1px solid var(--bj-hair);
}

.bj-bottomnav a {
	flex: 1;
	min-height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--bj-r-card);
	background: var(--bj-rail);
	font-family: var(--bj-display);
	font-size: 12px;
	color: var(--bj-chip-text);
	text-decoration: none;
}

.bj-bottomnav a[aria-current="page"],
.bj-bottomnav a.is-active {
	background: var(--bj-ink);
	color: var(--bj-on-ink);
	font-weight: 500;
}

/* Reading progress */
.bj-progress {
	height: var(--bj-progress-h);
	background: transparent;
	overflow: hidden;
}

.bj-progress__bar {
	height: 100%;
	background: var(--bj-clay);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* 06  Footer ============================================================= */

.bj-site-footer {
	margin-top: 40px;
	background: var(--bj-ink);
	color: var(--bj-on-ink-soft);
	padding-block: 38px 30px;
}

.bj-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
	gap: 36px;
}

.bj-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	text-decoration: none;
}

.bj-footer__brand .bj-brand__mark {
	width: 36px;
	height: 36px;
	border-radius: 11px;
}

.bj-footer__brand .bj-brand__name {
	font-size: 18px;
	color: var(--bj-on-ink);
}

.bj-footer__blurb {
	max-width: 34ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bj-on-ink-dim);
}

.bj-footer__col h2 {
	font-family: var(--bj-mono);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.bj-footer__col:nth-of-type(1) h2 {
	color: var(--bj-clay);
}

.bj-footer__col:nth-of-type(2) h2 {
	color: var(--bj-sand);
}

.bj-footer__col:nth-of-type(3) h2 {
	color: var(--bj-sage);
}

.bj-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.bj-footer__col a {
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--bj-on-ink-soft);
	text-decoration: none;
	display: inline-block;
	padding-block: 3px;
}

.bj-footer__col a:hover {
	color: var(--bj-on-ink);
	text-decoration: underline;
}

.bj-footer__legal {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--bj-hair-ink);
	display: flex;
	justify-content: space-between;
	gap: var(--bj-s2);
	flex-wrap: wrap;
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bj-on-ink-dim);
}

.bj-footer__legal a {
	color: var(--bj-on-ink-dim);
}

/* 07  Buttons, chips, pills, badges ====================================== */

.bj-btn {
	display: inline-block;
	padding: 13px 24px;
	border-radius: var(--bj-r-pill);
	background: var(--bj-ink);
	color: var(--bj-on-ink);
	font-family: var(--bj-display);
	font-weight: 500;
	font-size: 13.5px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--bj-ease), border-color var(--bj-ease);
}

.bj-btn:hover {
	background: var(--bj-ink-hover);
	color: var(--bj-on-ink);
}

.bj-btn--ghost {
	background: var(--bj-surface);
	border-color: var(--bj-edge-2);
	color: var(--bj-body);
}

.bj-btn--ghost:hover {
	background: var(--bj-rail);
	color: var(--bj-body);
}

/* On a coloured block: a translucent white pill that keeps the block's ink. */
.bj-btn--veil {
	background: var(--bj-veil);
	color: inherit;
}

.bj-btn--veil:hover {
	background: rgba(255, 255, 255, 0.75);
	color: inherit;
}

.bj-btn--lg {
	padding: 14px 26px;
	font-size: 14px;
}

.bj-chiprow {
	display: flex;
	gap: var(--bj-s1);
	flex-wrap: wrap;
}

.bj-chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: var(--bj-r-pill);
	background: var(--bj-rail);
	color: var(--bj-chip-text);
	font-family: var(--bj-display);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	transition: background var(--bj-ease);
}

.bj-chip:hover {
	background: var(--bj-rail-2);
	color: var(--bj-chip-text);
}

.bj-chip.is-active,
.bj-chip[aria-current] {
	background: var(--bj-ink);
	color: var(--bj-on-ink);
	font-weight: 500;
}

.bj-chip.is-active:hover,
.bj-chip[aria-current]:hover {
	background: var(--bj-ink-hover);
	color: var(--bj-on-ink);
}

/* Breadcrumb chips — mono, tighter */
.bj-crumbs {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bj-crumb {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 14px;
	background: var(--bj-rail);
	font-family: var(--bj-mono);
	font-size: 8.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bj-chip-mono);
	text-decoration: none;
	transition: background var(--bj-ease);
}

a.bj-crumb:hover {
	background: var(--bj-rail-2);
	color: var(--bj-chip-mono);
}

.bj-crumb--clay {
	background: var(--bj-clay);
	color: var(--bj-clay-ink);
}

.bj-crumb--sand {
	background: var(--bj-sand);
	color: var(--bj-sand-ink);
}

.bj-crumb--sage {
	background: var(--bj-sage);
	color: var(--bj-sage-ink);
}

.bj-crumb--mauve {
	background: var(--bj-mauve);
	color: var(--bj-mauve-ink);
}

a.bj-crumb--clay:hover,
a.bj-crumb--sand:hover,
a.bj-crumb--sage:hover,
a.bj-crumb--mauve:hover {
	filter: brightness(0.96);
}

.bj-crumb--veil {
	background: var(--bj-veil-2);
	color: inherit;
}

/* Meta row */
.bj-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bj-meta);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bj-meta a {
	color: inherit;
}

.bj-meta--onblock {
	color: inherit;
}

.bj-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--bj-r-chip);
	background: var(--bj-sage);
	color: var(--bj-sage-ink);
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* 08  Cards and coloured tiles =========================================== */

.bj-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--bj-r-card);
	background: var(--bj-surface);
	border: 1px solid var(--bj-line);
	overflow: hidden;
	transition: border-color var(--bj-ease);
}

.bj-card:hover {
	border-color: var(--bj-edge);
}

.bj-card:focus-within {
	border-color: var(--bj-edge);
}

.bj-card__body {
	padding: 15px 17px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.bj-card__title {
	font-size: 16.5px;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.bj-card__title a {
	color: inherit;
	text-decoration: none;
}

/* One stretched hit area per card, so the whole card is clickable without
   nesting interactive elements. */
.bj-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bj-card__desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--bj-body-3);
}

.bj-card__meta {
	margin-top: auto;
	padding-top: 3px;
	font-family: var(--bj-mono);
	font-size: 8.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bj-meta);
}

/* Coloured tile */
.bj-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--bj-r-card);
	padding: 24px 24px 26px;
	transition: filter var(--bj-ease);
}

.bj-tile:hover {
	filter: brightness(0.97);
}

.bj-tile--clay {
	background: var(--bj-clay);
	color: var(--bj-clay-body);
}

.bj-tile--sand {
	background: var(--bj-sand);
	color: var(--bj-sand-body);
}

.bj-tile--sage {
	background: var(--bj-sage);
	color: var(--bj-sage-body);
}

.bj-tile--mauve {
	background: var(--bj-mauve);
	color: var(--bj-mauve-body);
}

.bj-tile__eyebrow {
	font-family: var(--bj-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 12px;
	color: inherit;
}

.bj-tile__title {
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: -0.03em;
	margin-bottom: 8px;
}

.bj-tile--clay .bj-tile__title {
	color: var(--bj-clay-ink);
}

.bj-tile--sand .bj-tile__title {
	color: var(--bj-sand-ink);
}

.bj-tile--sage .bj-tile__title {
	color: var(--bj-sage-ink);
}

.bj-tile--mauve .bj-tile__title {
	color: var(--bj-mauve-ink);
}

.bj-tile__title a {
	color: inherit;
	text-decoration: none;
}

.bj-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bj-tile__desc {
	font-size: 13.5px;
	line-height: 1.5;
	color: inherit;
	margin-bottom: 0;
}

.bj-tile__meta {
	margin-top: auto;
	padding-top: var(--bj-s1);
	font-family: var(--bj-mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: inherit;
}

/* Tiles used as the "most read" strip on archives sit a step larger. */
.bj-tile--lg {
	border-radius: var(--bj-r-lg);
}

.bj-tile--lg .bj-tile__title {
	font-size: 18px;
}

/* List card — white card with an ink or rail header and coloured square bullets */
.bj-listcard {
	border-radius: var(--bj-r-lg);
	background: var(--bj-surface);
	border: 1px solid var(--bj-line);
	overflow: hidden;
}

.bj-listcard__head {
	padding: 12px 16px;
	background: var(--bj-ink);
	font-family: var(--bj-mono);
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bj-on-ink-soft);
}

.bj-listcard__head--rail {
	background: var(--bj-rail);
	color: var(--bj-chip-mono);
}

.bj-listcard ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bj-listcard li {
	border-bottom: 1px solid var(--bj-hair);
}

.bj-listcard li:last-child {
	border-bottom: 0;
}

.bj-listcard a {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 13px 16px;
	min-height: 44px;
	font-family: var(--bj-display);
	font-size: 14px;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--bj-ink);
	text-decoration: none;
	transition: background var(--bj-ease);
}

.bj-listcard a:hover {
	background: var(--bj-paper);
	color: var(--bj-ink);
	text-decoration: underline;
}

.bj-dot {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	flex: none;
}

.bj-dot--clay {
	background: var(--bj-clay);
}

.bj-dot--sand {
	background: var(--bj-sand);
}

.bj-dot--sage {
	background: var(--bj-sage);
}

.bj-dot--mauve {
	background: var(--bj-mauve);
}

/* 09  Image wells ======================================================== */

.bj-well {
	position: relative;
	display: grid;
	place-items: center;
	background-image: repeating-linear-gradient(135deg, var(--bj-weave-dark) 0 8px, var(--bj-weave-light) 8px 16px);
	overflow: hidden;
}

.bj-well img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bj-well__label {
	grid-area: 1 / 1;
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	color: var(--bj-placeholder);
	padding: var(--bj-s1);
	text-align: center;
}

.bj-well--card {
	aspect-ratio: 16 / 10;
}

.bj-well--lead {
	aspect-ratio: 16 / 8;
	border-radius: var(--bj-r-lg);
}

.bj-caption {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	line-height: 1.6;
	color: var(--bj-placeholder);
	margin-top: 10px;
}

/* 10  Ad trays =========================================================== */

.bj-ad {
	border-radius: var(--bj-r-lg);
	background: var(--bj-rail);
	padding: 13px;
}

.bj-ad__label {
	font-family: var(--bj-mono);
	font-size: 8.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bj-ad-label);
	margin-bottom: 10px;
}

/* The reserved well. Each slot carries its own reserved height as a custom
   property from inc/ads.php, so a unit loading in cannot shift the page. */
.bj-ad__well {
	min-height: var(--bj-ad-reserve, 100px);
	border-radius: 14px;
	background-image: repeating-linear-gradient(135deg, var(--bj-rail-2) 0 6px, var(--bj-rail-3) 6px 12px);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.bj-ad__well > * {
	max-width: 100%;
}

.bj-ad__placeholder {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	color: var(--bj-placeholder);
	padding: var(--bj-s1);
	text-align: center;
}

/* A live unit fills the tray; the weave is only the empty state. */
.bj-ad__well:has(ins.adsbygoogle),
.bj-ad__well:has(iframe) {
	background-image: none;
}

.bj-ad--rail {
	padding: 12px;
}

.bj-ad--rail .bj-ad__label {
	margin-bottom: 9px;
}

.bj-ad--flow {
	margin-block: 26px;
}

/* 11  Home =============================================================== */

.bj-hero {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	grid-template-rows: auto auto;
	gap: var(--bj-gutter);
	padding-top: var(--bj-s5);
}

.bj-hero-block {
	position: relative;
	border-radius: var(--bj-r-hero);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.bj-hero-block--lead {
	grid-row: span 2;
	grid-column: 1;
	background: var(--bj-sand);
	color: var(--bj-sand-body);
	padding: 44px 42px 38px;
	min-height: 380px;
}

.bj-hero-block--a {
	grid-column: 2;
	grid-row: 1;
}

.bj-hero-block--b {
	grid-column: 2;
	grid-row: 2;
}

.bj-hero-block--side {
	padding: 30px 30px 28px;
	justify-content: flex-start;
}

.bj-hero__eyebrow {
	font-family: var(--bj-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bj-sand-eyebrow);
	margin-bottom: var(--bj-s4);
}

.bj-hero__title {
	font-size: 56px;
	line-height: 1.02;
	letter-spacing: -0.045em;
	color: var(--bj-sand-ink);
}

.bj-hero__lede {
	margin-top: var(--bj-s4);
	max-width: 42ch;
	font-size: 17px;
	line-height: 1.62;
	color: var(--bj-sand-body);
}

.bj-hero__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 30px;
}

.bj-hero-block--side .bj-tile__eyebrow {
	font-size: 9.5px;
	letter-spacing: 0.22em;
	margin-bottom: 15px;
}

.bj-hero-block--side .bj-tile__title {
	font-size: 23px;
	line-height: 1.18;
	margin-bottom: 10px;
}

.bj-hero-block--side .bj-tile__desc {
	font-size: 14.5px;
}

/* Full-width band */
.bj-band {
	position: relative;
	border-radius: var(--bj-r-hero);
	background: var(--bj-mauve);
	color: var(--bj-mauve-body);
	padding: var(--bj-s5) 38px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.bj-band__eyebrow {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bj-mauve-eyebrow);
	margin-bottom: 12px;
}

.bj-band h2 {
	font-size: 28px;
	line-height: 1.2;
	color: var(--bj-mauve-ink);
	margin-bottom: var(--bj-s1);
}

.bj-band p {
	max-width: 56ch;
	font-size: 15px;
	line-height: 1.6;
}

.bj-band .bj-btn {
	flex: none;
}

/* 12  Pillar ============================================================= */

.bj-pillar-hero {
	position: relative;
	border-radius: var(--bj-r-hero);
	background: var(--bj-mauve);
	color: var(--bj-mauve-body);
	padding: var(--bj-s6) var(--bj-s6) 40px;
	margin-top: var(--bj-s5);
}

.bj-pillar-hero--clay {
	background: var(--bj-clay);
	color: var(--bj-clay-body);
}

.bj-pillar-hero--sand {
	background: var(--bj-sand);
	color: var(--bj-sand-body);
}

.bj-pillar-hero--sage {
	background: var(--bj-sage);
	color: var(--bj-sage-body);
}

.bj-pillar-hero .bj-crumbs {
	margin-bottom: var(--bj-s3);
}

.bj-pillar-hero__title {
	max-width: 24ch;
	font-size: 54px;
	line-height: 1.02;
	letter-spacing: -0.045em;
	color: var(--bj-mauve-ink);
}

.bj-pillar-hero--clay .bj-pillar-hero__title {
	color: var(--bj-clay-ink);
}

.bj-pillar-hero--sand .bj-pillar-hero__title {
	color: var(--bj-sand-ink);
}

.bj-pillar-hero--sage .bj-pillar-hero__title {
	color: var(--bj-sage-ink);
}

.bj-pillar-hero__lede {
	margin-top: var(--bj-s4);
	max-width: 64ch;
	font-size: 18px;
	line-height: 1.62;
}

.bj-pillar-hero .bj-meta {
	margin-top: 26px;
	color: inherit;
}

.bj-pillar-index__intro {
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--bj-body-2);
	margin-bottom: var(--bj-s3);
}

.bj-pillar-index__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bj-s2);
}

.bj-pillar-index__tiles .bj-tile {
	padding: 20px 22px 22px;
}

.bj-pillar-index__tiles .bj-tile__eyebrow {
	letter-spacing: 0.18em;
	margin-bottom: 10px;
}

.bj-pillar-index__tiles .bj-tile__title {
	font-size: 17.5px;
	margin-bottom: 7px;
}

.bj-pillar-index__rest {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 26px;
	margin-top: var(--bj-s3);
	padding-top: var(--bj-s3);
	border-top: 1px solid var(--bj-rule);
	list-style: none;
}

.bj-pillar-index__rest li {
	display: flex;
	gap: 12px;
	align-items: baseline;
}

.bj-pillar-index__num {
	font-family: var(--bj-mono);
	font-size: 10px;
	color: var(--bj-meta);
	flex: none;
}

.bj-pillar-index__rest a {
	font-family: var(--bj-display);
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--bj-ink);
	text-decoration: none;
}

.bj-pillar-index__rest a:hover {
	text-decoration: underline;
}

/* 13  Article ============================================================ */

.bj-article {
	max-width: var(--bj-measure);
}

.bj-article__title {
	font-size: 46px;
	line-height: 1.04;
	letter-spacing: -0.045em;
}

.bj-article .bj-crumbs {
	margin-bottom: var(--bj-s2);
}

.bj-article__meta {
	margin-top: var(--bj-s3);
	padding-bottom: var(--bj-s3);
	border-bottom: 1px solid var(--bj-rule);
}

.bj-article__lede {
	margin-top: var(--bj-s4);
	font-size: 19px;
	line-height: 1.62;
	color: var(--bj-body);
}

.bj-article__figure {
	margin: 26px 0 0;
}

.bj-article__figure img {
	width: 100%;
	border-radius: var(--bj-r-lg);
}

/* TOC */
.bj-toc {
	border-radius: var(--bj-r-lg);
	background: var(--bj-sand);
	color: var(--bj-sand-body);
	padding: var(--bj-s4) 24px;
}

.bj-toc__title {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bj-sand-eyebrow);
	margin-bottom: 14px;
}

.bj-toc ol {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.bj-toc--rail ol {
	grid-template-columns: 1fr;
	gap: 9px;
}

.bj-toc a {
	font-family: var(--bj-display);
	font-size: 14.5px;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--bj-sand-ink);
	text-decoration: none;
}

.bj-toc--rail a {
	font-size: 14px;
}

.bj-toc a:hover,
.bj-toc a:focus-visible {
	color: var(--bj-sand-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.bj-toc a.is-current {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* Callout */
.bj-callout {
	border-radius: var(--bj-r-lg);
	background: var(--bj-sage);
	color: var(--bj-sage-body);
	padding: 24px 26px;
	margin-block: 26px;
}

.bj-callout__label {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bj-sage-eyebrow);
	margin-bottom: 14px;
}

.bj-callout p {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--bj-sage-ink);
}

.bj-callout p + p {
	margin-top: 12px;
}

/* FAQ */
.bj-faq {
	display: grid;
	gap: 10px;
	margin-top: 14px;
}

.bj-faq__item {
	border-radius: var(--bj-r-tile);
	background: var(--bj-surface);
	border: 1px solid var(--bj-line);
	transition: border-color var(--bj-ease);
}

.bj-faq__item:hover,
.bj-faq__item[open] {
	border-color: var(--bj-edge);
}

.bj-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bj-s2);
	padding: 16px 20px;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-family: var(--bj-display);
	font-weight: 500;
	font-size: 15.5px;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--bj-ink);
}

.bj-faq__q::-webkit-details-marker {
	display: none;
}

.bj-faq__q::after {
	content: "+";
	font-family: var(--bj-mono);
	font-size: 14px;
	line-height: 1;
	color: var(--bj-meta);
	flex: none;
}

.bj-faq__item[open] .bj-faq__q::after {
	content: "\2212";
}

.bj-faq__a {
	padding: 0 20px 18px;
	font-size: 16px;
	line-height: 1.68;
	color: var(--bj-body);
}

.bj-faq__a > :first-child {
	margin-top: 0;
}

/* Author box */
.bj-authorbox {
	display: flex;
	gap: var(--bj-s2);
	align-items: center;
	margin-top: 30px;
	padding: 20px 22px;
	border-radius: var(--bj-r-lg);
	background: var(--bj-mauve);
	color: var(--bj-mauve-body);
}

.bj-authorbox__avatar {
	width: 50px;
	height: 50px;
	border-radius: var(--bj-r-tile);
	background: rgba(39, 34, 61, 0.2);
	flex: none;
	overflow: hidden;
}

.bj-authorbox__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.bj-authorbox__label {
	font-family: var(--bj-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bj-mauve-eyebrow);
	margin-bottom: 6px;
}

.bj-authorbox__body {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--bj-mauve-ink);
}

.bj-authorbox__body a {
	color: inherit;
}

/* Prev / next */
.bj-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bj-s2);
	margin-top: 26px;
}

.bj-adjacent__item {
	position: relative;
	border-radius: var(--bj-r-card);
	background: var(--bj-surface);
	border: 1px solid var(--bj-line);
	padding: 18px 20px;
	transition: border-color var(--bj-ease);
}

.bj-adjacent__item:hover {
	border-color: var(--bj-edge);
}

.bj-adjacent__item--next {
	text-align: right;
	grid-column: 2;
}

.bj-adjacent__label {
	font-family: var(--bj-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bj-meta);
	margin-bottom: 9px;
}

.bj-adjacent__title {
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.bj-adjacent__title a {
	color: inherit;
	text-decoration: none;
}

.bj-adjacent__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Sticky rail */
@media (min-width: 1100px) {
	.bj-columns__rail--sticky {
		position: sticky;
		top: calc(var(--bj-header-h) + 18px);
	}
}

/* 14  Prose ============================================================== */

.bj-prose {
	font-size: 17px;
	line-height: 1.72;
	color: var(--bj-body);
}

.bj-prose > * {
	margin-block: 0 14px;
}

.bj-prose > *:last-child {
	margin-bottom: 0;
}

.bj-prose h2 {
	font-size: 27px;
	line-height: 1.2;
	letter-spacing: -0.035em;
	margin-block: 32px 12px;
	scroll-margin-top: calc(var(--bj-header-h) + var(--bj-progress-h) + 12px);
}

.bj-prose h2:first-child {
	margin-top: 0;
}

.bj-prose h3 {
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.03em;
	margin-block: 24px 10px;
	scroll-margin-top: calc(var(--bj-header-h) + var(--bj-progress-h) + 12px);
}

.bj-prose h4 {
	font-size: 16.5px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin-block: 20px 8px;
}

.bj-prose a {
	color: var(--bj-meta);
	text-decoration: underline;
}

.bj-prose a:hover {
	color: var(--bj-clay-eyebrow);
}

.bj-prose strong,
.bj-prose b {
	font-weight: 700;
	color: var(--bj-ink);
}

.bj-prose ul,
.bj-prose ol {
	padding-left: 1.3em;
	margin-block: 0 16px;
}

.bj-prose li {
	margin-bottom: 8px;
}

.bj-prose li::marker {
	color: var(--bj-meta);
}

.bj-prose ul {
	list-style: none;
	padding-left: 0;
}

.bj-prose ul > li {
	position: relative;
	padding-left: 22px;
}

/* An absolutely positioned bullet, not a flex/grid child — a display change on
   the li would promote inline children such as <strong> to layout items and
   open gaps inside the sentence. */
.bj-prose ul > li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 0.66em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--bj-clay);
}

.bj-prose ul > li:nth-child(4n + 2)::before {
	background: var(--bj-sand);
}

.bj-prose ul > li:nth-child(4n + 3)::before {
	background: var(--bj-sage);
}

.bj-prose ul > li:nth-child(4n + 4)::before {
	background: var(--bj-mauve);
}

.bj-prose ul ul {
	margin-top: 8px;
}

.bj-prose blockquote {
	margin: 22px 0;
	padding: 20px 24px;
	border-radius: var(--bj-r-lg);
	background: var(--bj-rail);
	font-size: 17px;
	line-height: 1.6;
	color: var(--bj-body);
}

.bj-prose blockquote p:last-child {
	margin-bottom: 0;
}

.bj-prose blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--bj-mono);
	font-size: 9.5px;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bj-meta);
}

.bj-prose figure {
	margin: 26px 0;
}

.bj-prose img {
	border-radius: var(--bj-r-lg);
}

.bj-prose figcaption {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	line-height: 1.6;
	color: var(--bj-placeholder);
	margin-top: 10px;
}

.bj-prose code {
	font-family: var(--bj-mono);
	font-size: 0.9em;
	background: var(--bj-rail);
	padding: 2px 6px;
	border-radius: 6px;
}

.bj-prose pre {
	background: var(--bj-ink);
	color: var(--bj-on-ink-soft);
	padding: 18px 20px;
	border-radius: var(--bj-r-lg);
	overflow-x: auto;
}

.bj-prose pre code {
	background: none;
	padding: 0;
	color: inherit;
}

.bj-prose hr {
	border: 0;
	border-top: 1px solid var(--bj-rule);
	margin: 30px 0;
}

/* Tables. The scroller is a separate box so a wide table's min-width cannot
   propagate outward and widen the document. */
.bj-tablewrap {
	margin-block: 0 12px;
	border-radius: var(--bj-r-lg);
	overflow: hidden;
	border: 1px solid var(--bj-line);
}

.bj-tablescroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bj-prose table,
.bj-table {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	background: var(--bj-surface);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--bj-body);
	text-align: left;
}

.bj-prose table thead th,
.bj-table thead th {
	background: var(--bj-ink);
	color: var(--bj-on-ink-soft);
	font-family: var(--bj-mono);
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 12px 14px;
	white-space: nowrap;
}

.bj-prose table thead th:first-child,
.bj-table thead th:first-child {
	padding-left: 18px;
}

.bj-prose table thead th:last-child,
.bj-table thead th:last-child {
	color: var(--bj-sand);
	padding-right: 18px;
}

.bj-prose table td,
.bj-prose table tbody th,
.bj-table td,
.bj-table tbody th {
	padding: 13px 14px;
	border-bottom: 1px solid var(--bj-hair);
	vertical-align: top;
	font-weight: 400;
}

.bj-prose table td:first-child,
.bj-prose table tbody th:first-child,
.bj-table td:first-child,
.bj-table tbody th:first-child {
	padding-left: 18px;
}

.bj-prose table td:last-child,
.bj-table td:last-child {
	padding-right: 18px;
}

.bj-prose table tbody tr:last-child td,
.bj-prose table tbody tr:last-child th,
.bj-table tbody tr:last-child td,
.bj-table tbody tr:last-child th {
	border-bottom: 0;
}

.bj-prose table tfoot td,
.bj-table tfoot td {
	background: var(--bj-weave-light);
	font-family: var(--bj-mono);
	font-size: 9px;
	line-height: 1.6;
	color: var(--bj-ad-label);
	padding: 10px 18px;
	border-bottom: 0;
}

/* A short value in the last column reads as a status pill. */
.bj-pill {
	display: inline-block;
	padding: 4px 11px;
	border-radius: var(--bj-r-chip);
	background: var(--bj-rail);
	font-family: var(--bj-mono);
	font-size: 10.5px;
	line-height: 1.4;
	color: #4b4038;
	white-space: nowrap;
}

.bj-pill--sage {
	background: var(--bj-sage);
	color: var(--bj-sage-ink);
}

.bj-pill--clay {
	background: var(--bj-clay);
	color: var(--bj-clay-ink);
}

/* Blocks that opt out of the measure */
.bj-prose .alignwide,
.bj-prose .alignfull {
	max-width: 100%;
}

.bj-prose .alignleft {
	float: left;
	margin: 6px 22px 16px 0;
}

.bj-prose .alignright {
	float: right;
	margin: 6px 0 16px 22px;
}

.bj-prose .aligncenter {
	margin-inline: auto;
}

.bj-prose .wp-caption-text {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	color: var(--bj-placeholder);
	margin-top: 10px;
}

/* 15  Archive and search ================================================= */

.bj-archive-head {
	padding-top: var(--bj-s5);
}

.bj-archive-head__row {
	display: flex;
	align-items: baseline;
	gap: var(--bj-s2);
	flex-wrap: wrap;
}

.bj-archive-head h1 {
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: -0.045em;
}

.bj-archive-head__count {
	font-family: var(--bj-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bj-meta);
}

.bj-archive-head__desc {
	margin: 14px 0 var(--bj-s4);
	max-width: 74ch;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--bj-body);
}

.bj-archive-head__desc > * + * {
	margin-top: 12px;
}

.bj-archive-head .bj-chiprow {
	padding-bottom: var(--bj-s5);
	border-bottom: 1px solid var(--bj-rule);
}

.bj-archive-feed {
	padding-top: 26px;
}

.bj-archive-feed + .bj-archive-feed {
	padding-top: var(--bj-s3);
}

/* Search */
.bj-searchform {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.bj-searchform__field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 22px;
	border-radius: var(--bj-r-hero);
	background: var(--bj-surface);
	border: 1px solid var(--bj-edge);
	min-width: 0;
	transition: border-color var(--bj-ease);
}

.bj-searchform__field:focus-within {
	border-color: var(--bj-ink);
}

.bj-searchform__glyph {
	font-family: var(--bj-mono);
	font-size: 12px;
	color: var(--bj-meta);
	flex: none;
}

.bj-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 16px 0;
	font-family: var(--bj-display);
	font-size: 17px;
	letter-spacing: -0.02em;
	color: var(--bj-ink);
	caret-color: var(--bj-clay);
}

.bj-searchform input[type="search"]::placeholder {
	color: var(--bj-body-3);
}

.bj-searchform input[type="search"]:focus {
	outline: none;
}

.bj-searchform__submit {
	padding: 16px 26px;
	border-radius: var(--bj-r-hero);
	font-size: 14px;
	flex: none;
}

.bj-searchbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bj-s2);
	flex-wrap: wrap;
	margin-top: var(--bj-s4);
	padding-bottom: var(--bj-s2);
	border-bottom: 1px solid var(--bj-rule);
}

.bj-searchbar__count {
	font-family: var(--bj-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bj-meta);
}

.bj-searchbar .bj-chip {
	padding: 7px 14px;
	font-size: 12px;
}

.bj-results {
	display: grid;
	padding-top: var(--bj-s4);
}

.bj-result {
	padding: var(--bj-s4) 0;
	border-bottom: 1px solid var(--bj-line);
}

.bj-result .bj-crumbs {
	margin-bottom: 11px;
}

.bj-result__title {
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.035em;
	margin-bottom: var(--bj-s1);
}

.bj-result__title a {
	color: inherit;
	text-decoration: none;
}

.bj-result__title a:hover {
	text-decoration: underline;
}

.bj-result__snippet {
	max-width: 78ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--bj-body-2);
	margin-bottom: 10px;
}

.bj-result__snippet mark,
.bj-result__snippet strong {
	background: none;
	color: var(--bj-ink);
	font-weight: 700;
}

.bj-result__meta {
	font-family: var(--bj-mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bj-meta);
}

/* Pagination */
.bj-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bj-s2);
	flex-wrap: wrap;
	padding: 28px 0 var(--bj-s6);
}

.bj-pagination__nums {
	display: flex;
	gap: 7px;
	align-items: center;
	flex-wrap: wrap;
}

.bj-pagination .page-numbers {
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--bj-r-chip);
	background: var(--bj-rail);
	color: var(--bj-chip-text);
	display: grid;
	place-items: center;
	font-family: var(--bj-display);
	font-size: 13.5px;
	text-decoration: none;
	transition: background var(--bj-ease);
}

.bj-pagination a.page-numbers:hover {
	background: var(--bj-rail-2);
	color: var(--bj-chip-text);
}

.bj-pagination .page-numbers.current {
	background: var(--bj-ink);
	color: var(--bj-on-ink);
	font-weight: 500;
}

.bj-pagination .page-numbers.dots {
	background: none;
	color: var(--bj-meta);
}

.bj-pagination__range {
	font-family: var(--bj-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bj-meta);
}

/* Empty states */
.bj-empty {
	padding-block: var(--bj-s4) var(--bj-s6);
}

.bj-empty__title {
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.04em;
	margin-bottom: 12px;
}

.bj-empty__body {
	max-width: 64ch;
	font-size: 16.5px;
	line-height: 1.65;
	margin-bottom: var(--bj-s4);
}

/* 16  Pages and trust ==================================================== */

.bj-page__eyebrow {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bj-meta);
	margin-bottom: var(--bj-s2);
}

.bj-page__title {
	font-size: 46px;
	line-height: 1.05;
	letter-spacing: -0.045em;
}

.bj-page__lede {
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.64;
	color: var(--bj-body);
}

.bj-page .bj-prose h2 {
	font-size: 25px;
}

.bj-contact-card {
	border-radius: var(--bj-r-lg);
	background: var(--bj-ink);
	color: var(--bj-on-ink-soft);
	padding: 24px 24px 26px;
}

.bj-contact-card__label {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bj-clay);
	margin-bottom: 14px;
}

.bj-contact-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
	font-size: 14.5px;
}

.bj-contact-card a {
	color: var(--bj-on-ink-soft);
	text-decoration: none;
	display: inline-block;
	padding-block: 2px;
}

.bj-contact-card a:hover {
	color: var(--bj-on-ink);
	text-decoration: underline;
}

.bj-contact-card__note {
	margin-top: var(--bj-s2);
	padding-top: 14px;
	border-top: 1px solid var(--bj-hair-ink);
	font-family: var(--bj-mono);
	font-size: 9.5px;
	line-height: 1.7;
	color: var(--bj-on-ink-dim);
}

.bj-note {
	border-radius: var(--bj-r-lg);
	background: var(--bj-sand);
	color: var(--bj-sand-body);
	padding: 20px 22px;
}

.bj-note__label {
	font-family: var(--bj-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bj-sand-eyebrow);
	margin-bottom: 10px;
}

.bj-note p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--bj-sand-ink);
}

/* Author cards */
.bj-people {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bj-s2);
}

.bj-person {
	position: relative;
	border-radius: var(--bj-r-card);
	background: var(--bj-surface);
	border: 1px solid var(--bj-line);
	padding: 20px;
	display: flex;
	gap: 14px;
	align-items: center;
	transition: border-color var(--bj-ease);
}

.bj-person:hover {
	border-color: var(--bj-edge);
}

.bj-person__avatar {
	width: 52px;
	height: 52px;
	border-radius: var(--bj-r-tile);
	background-image: repeating-linear-gradient(135deg, var(--bj-weave-dark) 0 6px, var(--bj-weave-light) 6px 12px);
	flex: none;
	overflow: hidden;
}

.bj-person__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.bj-person__name {
	font-family: var(--bj-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--bj-ink);
}

.bj-person__name a {
	color: inherit;
	text-decoration: none;
}

.bj-person__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bj-person__role {
	font-family: var(--bj-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bj-meta);
	margin-top: 5px;
}

/* 17  Comments =========================================================== */

.bj-comments {
	margin-top: var(--bj-s5);
	padding-top: var(--bj-s5);
	border-top: 1px solid var(--bj-rule);
}

.bj-comments h2 {
	font-size: 25px;
	margin-bottom: var(--bj-s3);
}

.bj-comments ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.bj-comments .children {
	margin-top: 12px;
	margin-left: var(--bj-s4);
}

.bj-comment {
	border-radius: var(--bj-r-tile);
	background: var(--bj-surface);
	border: 1px solid var(--bj-line);
	padding: 18px 20px;
}

.bj-comment__meta {
	font-family: var(--bj-mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bj-meta);
	margin-bottom: 10px;
}

.bj-comments .comment-form {
	display: grid;
	gap: 12px;
	margin-top: var(--bj-s4);
}

.bj-comments input[type="text"],
.bj-comments input[type="email"],
.bj-comments input[type="url"],
.bj-comments textarea {
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--bj-r-tile);
	border: 1px solid var(--bj-edge);
	background: var(--bj-surface);
	font-family: var(--bj-text);
	font-size: 16px;
}

.bj-comments .submit {
	justify-self: start;
	padding: 13px 24px;
	border-radius: var(--bj-r-pill);
	background: var(--bj-ink);
	color: var(--bj-on-ink);
	font-family: var(--bj-display);
	font-weight: 500;
	font-size: 13.5px;
	border: 0;
	cursor: pointer;
}

/* 18  Utility, responsive, print ========================================= */

.bj-stack > * + * {
	margin-top: var(--bj-s2);
}

.bj-hide {
	display: none !important;
}

/* --- 1280: centre, stop growing ---------------------------------------- */

/* --- 1100: sticky rail engages (handled above) ------------------------- */

@media (max-width: 1099px) {
	:root {
		--bj-col-gap: 30px;
	}
}

/* --- 900: the rail drops under the content ----------------------------- */

@media (max-width: 900px) {
	.bj-columns {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bj-s5);
	}

	.bj-columns__rail {
		max-width: 520px;
	}

	.bj-article {
		max-width: none;
	}

	.bj-hero {
		grid-template-columns: 1fr;
	}

	.bj-hero-block--lead,
	.bj-hero-block--a,
	.bj-hero-block--b {
		grid-column: 1;
		grid-row: auto;
	}

	.bj-hero-block--lead {
		min-height: 0;
	}
}

/* --- 768: four-up becomes two-up --------------------------------------- */

@media (max-width: 768px) {
	:root {
		--bj-pad: var(--bj-s3);
		--bj-section: 26px;
	}

	.bj-grid--3,
	.bj-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bj-people {
		grid-template-columns: 1fr;
	}

	.bj-nav__list,
	.bj-nav .bj-search-pill {
		display: none;
	}

	.bj-burger {
		display: inline-flex;
	}

	.bj-masthead {
		padding-block: 14px;
	}

	.bj-brand__mark {
		width: 30px;
		height: 30px;
		border-radius: 10px;
	}

	.bj-brand__name {
		font-size: 15px;
	}

	.bj-brand__tagline {
		display: none;
	}

	.bj-hero__title {
		font-size: 33px;
		line-height: 1.05;
		letter-spacing: -0.04em;
	}

	.bj-hero-block--lead {
		border-radius: 22px;
		padding: 26px 24px 24px;
	}

	.bj-hero__lede {
		margin-top: 14px;
		font-size: 15px;
		line-height: 1.6;
	}

	.bj-hero__actions {
		margin-top: var(--bj-s3);
	}

	.bj-article__title {
		font-size: 31px;
		line-height: 1.06;
		letter-spacing: -0.04em;
	}

	.bj-pillar-hero {
		border-radius: 22px;
		padding: 28px 24px 26px;
	}

	.bj-pillar-hero__title {
		font-size: 32px;
		line-height: 1.06;
		letter-spacing: -0.04em;
	}

	.bj-pillar-hero__lede {
		font-size: 16px;
	}

	.bj-archive-head h1 {
		font-size: 30px;
		letter-spacing: -0.04em;
	}

	.bj-page__title {
		font-size: 32px;
	}

	.bj-section-head h2 {
		font-size: 20px;
	}

	.bj-prose {
		font-size: 16px;
		line-height: 1.68;
	}

	.bj-prose h2 {
		font-size: 21px;
		margin-top: 26px;
	}

	.bj-prose h3 {
		font-size: 17.5px;
	}

	.bj-article__lede {
		font-size: 16px;
		line-height: 1.66;
	}

	.bj-band {
		border-radius: 22px;
		padding: 24px 22px;
		gap: var(--bj-s4);
	}

	.bj-band h2 {
		font-size: 22px;
	}

	.bj-toc ol {
		grid-template-columns: 1fr;
	}

	.bj-toc {
		border-radius: var(--bj-r-card);
		padding: 18px 20px;
	}

	.bj-well--lead {
		aspect-ratio: 16 / 9;
		border-radius: var(--bj-r-tile);
	}

	.bj-article__figure img {
		border-radius: var(--bj-r-tile);
	}

	.bj-pillar-index__tiles,
	.bj-pillar-index__rest {
		grid-template-columns: 1fr;
	}

	.bj-adjacent {
		grid-template-columns: 1fr;
	}

	.bj-adjacent__item--next {
		grid-column: 1;
		text-align: left;
	}

	.bj-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px;
	}

	.bj-ad {
		border-radius: var(--bj-r-card);
		padding: 11px;
	}

	.bj-ad__label {
		font-size: 8px;
		letter-spacing: 0.26em;
		margin-bottom: 8px;
	}

	.bj-ad__well {
		border-radius: 12px;
		min-height: var(--bj-ad-reserve-mobile, var(--bj-ad-reserve, 250px));
	}

	/* Chip rows scroll rather than wrap; 44px touch height throughout. */
	.bj-chiprow {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
		margin-inline: calc(var(--bj-pad) * -1);
		padding-inline: var(--bj-pad);
	}

	.bj-chiprow::-webkit-scrollbar {
		display: none;
	}

	.bj-chip {
		flex: none;
		min-height: 44px;
	}

	.bj-searchbar .bj-chip {
		min-height: 44px;
	}

	.bj-crumb {
		min-height: 26px;
		display: inline-flex;
		align-items: center;
	}

	.bj-bottomnav {
		display: flex;
	}

	body.bj-has-bottomnav {
		padding-bottom: 78px;
	}

	.bj-site-footer {
		margin-top: 30px;
	}

	.bj-columns {
		padding-block: var(--bj-s4) var(--bj-s5);
	}
}

/* --- 560: single column everywhere ------------------------------------- */

@media (max-width: 560px) {
	.bj-grid--2,
	.bj-grid--3,
	.bj-grid--4 {
		grid-template-columns: 1fr;
	}

	/*
		The mobile comp keeps the two feature blocks side by side under one
		full-width hero. The 900px rule above pins every block to column one,
		so both have to be placed again explicitly here — auto-placement alone
		would leave them stacked.
	*/
	.bj-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.bj-hero-block--lead {
		grid-column: 1 / -1;
	}

	.bj-hero-block--a {
		grid-column: 1;
	}

	.bj-hero-block--b {
		grid-column: 2;
	}

	.bj-hero-block--side {
		padding: 18px;
	}

	.bj-hero-block--side .bj-tile__title {
		font-size: 15.5px;
	}

	.bj-hero-block--side .bj-tile__desc {
		display: none;
	}

	.bj-hero-block--side .bj-tile__eyebrow {
		font-size: 8px;
		letter-spacing: 0.18em;
		margin-bottom: 9px;
	}

	.bj-searchform {
		flex-wrap: wrap;
	}

	.bj-searchform__field {
		flex-basis: 100%;
	}

	.bj-footer__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 400px) {
	:root {
		--bj-pad: 16px;
	}

	.bj-hero-block--lead {
		padding: 22px 20px 20px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Print */
@media print {
	.bj-site-header,
	.bj-site-footer,
	.bj-bottomnav,
	.bj-ad,
	.bj-columns__rail,
	.bj-progress,
	.bj-adjacent {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}

	.bj-columns {
		display: block;
	}
}

/* 19  Late additions ===================================================== */

/*
	The masthead and the reading-progress bar travel together in one sticky
	box, so the bar is always visible while an article is being read. Below
	769px the masthead scrolls away — the bottom bar already holds fixed
	chrome there — and only the 3px bar stays, which costs no screen height.
	JS writes the measured height of this box into --bj-header-h, so the
	sticky rail offset and heading scroll-margin are exact at every size; the
	token's declared value is the fallback if scripts never run.
*/
.bj-top {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bj-surface);
}

@media (max-width: 768px) {
	.bj-top {
		position: static;
	}

	.bj-progress {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

/* Brand sizes ----------------------------------------------------------- */

.bj-brand__mark--sm {
	width: 36px;
	height: 36px;
	border-radius: 11px;
}

.bj-brand__mark--xs {
	width: 30px;
	height: 30px;
	border-radius: 10px;
}

.bj-brand:has(.bj-brand__mark--sm) .bj-brand__name {
	font-size: 19px;
}

.bj-brand:has(.bj-brand__mark--xs) .bj-brand__name {
	font-size: 15px;
}

.bj-brand__text {
	min-width: 0;
}

.bj-brand:hover .bj-brand__name {
	color: var(--bj-ink-hover);
}

/* Footer columns are children two, three and four of the grid — the brand
   block is the first — so key the accent colours off child position rather
   than type, which would count the brand div too. */
.bj-footer__grid > .bj-footer__col:nth-child(2) h2 {
	color: var(--bj-clay);
}

.bj-footer__grid > .bj-footer__col:nth-child(3) h2 {
	color: var(--bj-sand);
}

.bj-footer__grid > .bj-footer__col:nth-child(4) h2 {
	color: var(--bj-sage);
}

.bj-footer__legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--bj-s2);
	flex-wrap: wrap;
}

.bj-footer__legal-menu a {
	text-decoration: none;
}

.bj-footer__legal-menu a:hover {
	text-decoration: underline;
}

.bj-footer__legal p {
	margin: 0;
}

/* Breadcrumbs ----------------------------------------------------------- */

.bj-crumbs-wrap {
	display: block;
}

.bj-crumbs li {
	display: block;
}

/* Callouts and empty states --------------------------------------------- */

.bj-callout--close {
	margin-bottom: var(--bj-s6);
}

.bj-callout__actions {
	margin-top: var(--bj-s2);
}

.bj-callout__actions .bj-btn {
	color: var(--bj-sage-ink);
}

.bj-callout__actions .bj-btn:not(.bj-btn--veil) {
	color: var(--bj-on-ink);
}

.bj-empty--404 {
	padding-top: var(--bj-s6);
}

.bj-404__pillars {
	padding-bottom: var(--bj-s6);
}

/* Pillar index ---------------------------------------------------------- */

.bj-pillar-index h2 {
	font-size: 26px;
	line-height: 1.2;
	margin-bottom: var(--bj-s1);
}

/* Trust template -------------------------------------------------------- */

.bj-trust {
	padding-block: var(--bj-s5) var(--bj-s6);
	max-width: 720px;
}

.bj-trust__meta {
	margin-top: var(--bj-s3);
	padding-bottom: var(--bj-s3);
	border-bottom: 1px solid var(--bj-rule);
}

.bj-trust .bj-toc {
	margin-block: 26px;
}

/* Page template --------------------------------------------------------- */

.bj-page .bj-article {
	max-width: 720px;
}

.bj-page .bj-prose {
	margin-top: 26px;
}

/* Widgets in the rail --------------------------------------------------- */

.bj-widget {
	padding-bottom: 4px;
}

.bj-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bj-widget li {
	border-bottom: 1px solid var(--bj-hair);
}

.bj-widget li:last-child {
	border-bottom: 0;
}

.bj-widget a {
	display: block;
	padding: 13px 16px;
	min-height: 44px;
	font-family: var(--bj-display);
	font-size: 14px;
	line-height: 1.35;
	color: var(--bj-ink);
	text-decoration: none;
}

.bj-widget a:hover {
	background: var(--bj-paper);
}

/* Comments -------------------------------------------------------------- */

.bj-comments__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.bj-comment__body > :first-child {
	margin-top: 0;
}

.bj-comment__body > :last-child {
	margin-bottom: 0;
}

/* Search results -------------------------------------------------------- */

.bj-result:last-child {
	border-bottom: 0;
}

.bj-results + .bj-pagination {
	padding-top: var(--bj-s3);
}

/* Sticky rail: never taller than the viewport, or it stops sticking. */
@media (min-width: 1100px) {
	.bj-columns__rail--sticky {
		max-height: calc(100vh - var(--bj-header-h) - 36px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

/* The archive lead strip and the card grid share a gutter; on page two the
   strip is absent, so the feed must not inherit its top padding twice. */
.bj-archive-feed:first-of-type {
	padding-top: 26px;
}

/* Skip link must clear the sticky header when focused. */
.bj-skip:focus {
	z-index: 200;
}

/* Long contents cards ---------------------------------------------------- */

.bj-toc--long:not(.bj-toc--rail) ol {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 9px 20px;
}

.bj-toc--long:not(.bj-toc--rail) a {
	font-size: 13.5px;
	line-height: 1.3;
}

.bj-toc--rail.bj-toc--long ol {
	max-height: 44vh;
	overflow-y: auto;
	scrollbar-width: thin;
	padding-right: 4px;
}

@media (max-width: 900px) {
	.bj-toc--long:not(.bj-toc--rail) ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.bj-toc--long:not(.bj-toc--rail) ol {
		grid-template-columns: 1fr;
		max-height: 46vh;
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

/* Touch targets ---------------------------------------------------------- */

/*
	WCAG 2.2 puts the floor at 24px; the design's own rule is 44px on mobile.
	Inline links inside prose take the inline exception, everything else is
	sized to clear the larger of the two.
*/
.bj-morelink {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-block: 4px;
}

@media (max-width: 768px) {
	.bj-brand {
		min-height: 44px;
	}

	.bj-morelink,
	.bj-footer__col a,
	.bj-footer__legal a,
	.bj-contact-card a,
	.bj-pillar-index__rest a,
	.bj-toc a,
	.bj-crumb {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.bj-toc ol {
		gap: 0 24px;
	}

	.bj-pillar-index__rest {
		gap: 0 26px;
	}
}

@media (max-width: 768px) {
	.bj-pagination .page-numbers {
		min-width: 44px;
		height: 44px;
	}

	.bj-comments .submit,
	.bj-searchform__submit {
		min-height: 44px;
	}

	/* A result headline is the only target in its row, so it carries the
	   minimum itself rather than borrowing a card's box. */
	.bj-result__title a {
		display: inline-block;
		padding-block: 9px;
	}

	.bj-result__title {
		margin-bottom: 0;
	}
}