/* Journal (S20 index, S21 post, S22 category): newsletter band, PostCard, featured post, article. */

/* ---- newsletter band ---- */
.nlb {
	padding-block: var(--sp-64) var(--sec);
}

.nlb-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
	padding-block-start: var(--sp-48);
	border-block-start: var(--hairline) solid var(--ln-s);
}

.nlb-t .d2 {
	margin-block-start: var(--sp-8);
	font-size: clamp(30px, 3.6vw, 56px);
}

.nlb-f {
	display: grid;
	gap: var(--sp-16);
	justify-items: start;
}

.nlb-f .fld {
	inline-size: 100%;
}

.nlb-msg {
	min-block-size: 1.4em;
	margin: 0;
	color: var(--fg2);
}

@media (max-width: 1000px) {
	.nlb-in {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- category links ---- */
.bcats ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
	margin: var(--sp-24) 0 0;
	padding: 0;
	list-style: none;
}

.bcats a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: var(--sp-16);
	color: var(--fg);
	text-decoration: none;
	border: var(--hairline) solid var(--ln-s);
	transition: border-color var(--d-base) var(--ease), background var(--d-base) var(--ease);
}

.bcats a:hover {
	border-color: var(--gold-300);
}

.bcats a[aria-current="page"] {
	border-color: var(--acc);
	background: var(--hi-wash);
	box-shadow: inset 0 0 0 1px var(--acc);
}

.bcats a:focus-visible {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
}

/* ---- PostCard ---- */
.blg-f {
	padding-block: var(--sp-48) 0;
}

.blg {
	padding-block: var(--sp-48) 0;
}

.bgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-32) var(--sp-24);
}

.pcard {
	position: relative;
	min-inline-size: 0;
}

.pcard-a {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: var(--sp-16);
	block-size: 100%;
	color: var(--fg);
	text-decoration: none;
}

.pcard-a:focus-visible {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
}

.pcv {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	color: var(--gray-300);
	background: var(--ink-900);
	border: var(--hairline) solid var(--ln-s);
}

.pcv img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--d-slow) var(--ease);
}

.pcv svg {
	inline-size: 100%;
	block-size: 100%;
}

.pcv svg .hi {
	stroke: var(--gold-300);
}

.pcv .imgerr {
	inset: 0;
}

.pcv.is-broken .imgerr {
	display: grid;
}

.pcv.is-broken img {
	visibility: hidden;
}

.pcard-a:hover .pcv img,
.pcard-a:focus-visible .pcv img {
	transform: scale(1.04);
}

.pcard-b {
	display: grid;
	align-content: start;
	gap: var(--sp-8);
}

.pcard-m {
	color: var(--fg2);
}

.pcard-m b {
	color: var(--hi);
	font-weight: 400;
}

.pcard h2,
.pcard h3 {
	margin: 0;
	font-size: clamp(20px, 1.9vw, 28px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.pcard-f h2 {
	font-size: clamp(30px, 3.4vw, 52px);
}

.pcard-x {
	display: -webkit-box;
	overflow: hidden;
	color: var(--fg2);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pcard-f .pcard-x {
	-webkit-line-clamp: 4;
	max-inline-size: 60ch;
}

.pcard-en {
	position: absolute;
	inset-block-start: var(--sp-12);
	inset-inline-start: var(--sp-12);
	margin: 0;
	background: var(--bg);
}

.pcard-f .pcard-a {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	grid-template-rows: none;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

.blg-more {
	margin: 0;
	color: var(--fg2);
}

@media (max-width: 1100px) {
	.bgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1000px) {
	.pcard-f .pcard-a {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
	}
}

@media (max-width: 640px) {
	.bgrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.rm .pcard-a:hover .pcv img,
.rm .pcard-a:focus-visible .pcv img {
	transform: none;
}

/* ---- article (S21) ---- */
.bprog {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 60;
	block-size: 3px;
	pointer-events: none;
}

.bprog i {
	display: block;
	block-size: 100%;
	background: var(--gold-300);
	transform: scaleX(0);
	transform-origin: left center;
}

html[dir="rtl"] .bprog i {
	transform-origin: right center;
}

.bart-h {
	padding-block-end: var(--sp-32);
}

.bart-m {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-8) var(--sp-16);
	margin: 0;
	color: var(--fg2);
}

.bart-m b {
	font-weight: 400;
}

.bart-note a {
	color: var(--hi);
}

.bart-cv {
	margin-block-start: var(--sp-32);
	max-inline-size: 1000px;
}

.bart-col {
	min-inline-size: 0;
	max-inline-size: 72ch;
}

/* the body is sanitised HTML: type it here, since it carries no classes */
.art-body > * + * {
	margin-block-start: 1em;
}

.art-body p,
.art-body li {
	font-size: var(--fs-lead);
	line-height: 1.7;
}

.art-body h2 {
	margin-block: 2.2em 0.6em;
	font-size: clamp(26px, 2.6vw, 38px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.03em;
	scroll-margin-block-start: calc(var(--hdr-h) + var(--sp-24));
}

.art-body h3 {
	margin-block: 1.8em 0.5em;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 400;
	scroll-margin-block-start: calc(var(--hdr-h) + var(--sp-24));
}

.art-body ul,
.art-body ol {
	display: grid;
	gap: 0.4em;
	padding-inline-start: 1.3em;
}

.art-body blockquote {
	margin-inline: 0;
	padding-inline-start: var(--sp-24);
	border-inline-start: 2px solid var(--hi);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 300;
	line-height: 1.3;
}

.art-body a {
	color: var(--acc-t);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.art-body img {
	max-inline-size: 100%;
	block-size: auto;
}

.art-body code,
.art-body pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

.art-body pre {
	overflow-x: auto;
	padding: var(--sp-16);
	border: var(--hairline) solid var(--ln-s);
}

.bart-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-12);
	margin-block-start: var(--sp-48);
	padding-block-start: var(--sp-24);
	border-block-start: var(--hairline) solid var(--ln-s);
}

.bart-au {
	display: flex;
	gap: var(--sp-24);
	margin-block-start: var(--sp-48);
	padding: var(--sp-24);
	border: var(--hairline) solid var(--ln-s);
}

.bart-au img {
	flex: none;
	inline-size: 72px;
	block-size: 72px;
	object-fit: cover;
	border-radius: 50%;
}

.bart-au h3 {
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-h3);
	font-weight: 300;
}

.bart-au p {
	margin: var(--sp-4) 0 0;
}

.bart-role {
	color: var(--fg2);
}

.bart-cta {
	display: grid;
	gap: var(--sp-16);
	justify-items: start;
	margin-block-start: var(--sp-48);
	padding: var(--sp-32);
	border: var(--hairline) solid var(--acc);
	background: var(--hi-wash);
}

.bart-cta p {
	margin: 0;
}

.bart-rel {
	padding-block-end: 0;
}