/* =========================================================================
   HollaJack: the journal
   Loaded only on the journal index, category archives and single articles
   (functions.php, hj_is_journal_request()). Built on the tokens: bone paper,
   ink, hairlines, Bodoni display, near-sharp corners. Brass stays reserved for
   edition numbers and the chop. Photography does the colour.

   Markup lives in inc/blog.php and home.php, category.php, single.php.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Breadcrumbs (Rank Math prints .rank-math-breadcrumb)
   ---------------------------------------------------------------------- */

.hj-jcrumbs {
	margin-bottom: var(--hj-5);
}

.hj-jcrumbs p {
	margin: 0;
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
}

.hj-jcrumbs a {
	color: var(--hj-stone);
}

.hj-jcrumbs a:hover {
	color: var(--hj-ink);
}

.hj-jcrumbs .separator {
	margin-inline: var(--hj-1);
}

.hj-jcrumbs .last {
	color: var(--hj-ink-soft);
}

/* -------------------------------------------------------------------------
   Journal index header
   ---------------------------------------------------------------------- */

.hj-jintro {
	padding-bottom: var(--hj-8);
}

.hj-jintro__head {
	margin-bottom: var(--hj-8);
}

.hj-jintro__head h1 {
	max-width: 24ch;
}

.hj-jintro__head h1 em {
	display: block;
	color: var(--hj-ink-soft);
}

.hj-jintro .hj-lede {
	font-size: 1.125rem;
	max-width: 54ch;
}

/* -------------------------------------------------------------------------
   Audience tiles: Artists, Collectors, News
   ---------------------------------------------------------------------- */

.hj-jtiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hj-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hj-jtile,
.hj-jtile:hover {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hj-jtile__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
	background: var(--hj-bone-deep);
	transition: border-color var(--hj-fade);
}

.hj-jtile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hj-jtile:hover .hj-jtile__media {
	border-color: var(--hj-line-strong);
}

.hj-jtile__kicker {
	display: block;
	margin: var(--hj-4) 0 var(--hj-1);
}

.hj-jtile__title {
	font-size: var(--hj-size-display-m);
	line-height: var(--hj-leading-display-m);
}

.hj-jtile:hover .hj-jtile__title {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.hj-jtile__text {
	display: block;
	margin-top: var(--hj-2);
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
}

.hj-jtile__count {
	display: block;
	margin-top: var(--hj-3);
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
}

@media (max-width: 900px) {
	/* Compact horizontal tiles: three tall photos would push the articles off
	   the first screen on a phone. */
	.hj-jtiles {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hj-5);
	}

	.hj-jtile {
		display: grid;
		grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
		column-gap: var(--hj-4);
		align-content: start;
	}

	.hj-jtile__media {
		grid-row: 1 / span 4;
		align-self: start;
	}

	.hj-jtile__kicker {
		margin-top: 0;
	}
}

@media (max-width: 560px) {
	.hj-jtile__text {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Lists: heading row, topic pills, grid, cards, pager
   ---------------------------------------------------------------------- */

.hj-jlist {
	padding-block: var(--hj-8) var(--hj-9);
}

.hj-jlist__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--hj-4) var(--hj-6);
	margin-bottom: var(--hj-7);
}

.hj-jpills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hj-2);
}

.hj-jpills__item {
	font-size: var(--hj-size-small);
	line-height: 1;
	color: var(--hj-ink-soft);
	text-decoration: none;
	padding: var(--hj-3) var(--hj-4);
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-control);
	transition: border-color var(--hj-fade), background var(--hj-fade), color var(--hj-fade);
}

.hj-jpills__item:hover {
	border-color: var(--hj-line-strong);
	text-decoration: none;
}

.hj-jpills__item.is-active {
	background: var(--hj-ink);
	border-color: var(--hj-ink);
	color: var(--hj-bone);
}

.hj-jgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hj-8) var(--hj-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hj-jgrid__full {
	grid-column: 1 / -1;
}

/* Card: one link (the title), stretched over the whole card. */

.hj-jcard {
	position: relative;
	margin: 0;
}

.hj-jcard__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
	background: var(--hj-bone-deep);
	transition: border-color var(--hj-fade);
}

.hj-jcard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hj-jcard:hover .hj-jcard__media {
	border-color: var(--hj-line-strong);
}

.hj-jcard__eyebrow {
	margin: var(--hj-4) 0 var(--hj-2);
}

.hj-jcard__title {
	font-size: 1.5rem;
	line-height: 1.2;
	text-wrap: balance;
}

.hj-jcard__title a {
	color: var(--hj-ink);
	text-decoration: none;
}

.hj-jcard__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.hj-jcard:hover .hj-jcard__title a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.hj-jcard__title a:focus-visible {
	outline: none;
}

.hj-jcard__title a:focus-visible::after {
	outline: 2px solid var(--hj-ink);
	outline-offset: 6px;
	border-radius: var(--hj-radius-mat);
}

.hj-jcard__meta {
	margin: var(--hj-2) 0 0;
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
}

.hj-jcard__excerpt {
	margin: var(--hj-3) 0 0;
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
}

/* Lead card: full width, photo beside text. */

.hj-jcard--lead {
	grid-column: 1 / -1;
}

.hj-jcard--lead .hj-jcard__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--hj-7);
	align-items: center;
}

.hj-jcard--lead .hj-jcard__eyebrow {
	margin-top: 0;
}

.hj-jcard--lead .hj-jcard__title {
	font-size: var(--hj-size-display-l);
	line-height: var(--hj-leading-display-l);
}

.hj-jcard--lead .hj-jcard__excerpt {
	font-size: 1.0625rem;
	margin-top: var(--hj-4);
	max-width: 46ch;
}

.hj-jcard__more {
	display: inline-block;
	margin-top: var(--hj-5);
	font-size: var(--hj-size-small);
	font-weight: 500;
	color: var(--hj-ink);
}

.hj-jcard--lead:hover .hj-jcard__more {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Pager */

.hj-jpager {
	margin-top: var(--hj-8);
}

.hj-jpager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hj-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hj-jpager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--hj-4);
	font-size: var(--hj-size-small);
	color: var(--hj-ink);
	text-decoration: none;
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-control);
}

.hj-jpager a.page-numbers:hover {
	border-color: var(--hj-ink);
}

.hj-jpager .page-numbers.current {
	background: var(--hj-ink);
	border-color: var(--hj-ink);
	color: var(--hj-bone);
}

.hj-jpager .page-numbers.dots {
	border-color: transparent;
}

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

@media (max-width: 800px) {
	.hj-jcard--lead .hj-jcard__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hj-5);
	}

	.hj-jcard--lead .hj-jcard__title {
		font-size: var(--hj-size-display-m);
	}
}

@media (max-width: 560px) {
	.hj-jgrid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hj-7);
	}
}

/* -------------------------------------------------------------------------
   Hub / category header
   ---------------------------------------------------------------------- */

.hj-jhub {
	padding-bottom: var(--hj-8);
}

.hj-jhub__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--hj-8);
	align-items: center;
	margin-top: var(--hj-6);
}

.hj-jhub__grid--text {
	grid-template-columns: minmax(0, 1fr);
}

.hj-jhub__text .hj-lede {
	font-size: 1.125rem;
	max-width: 46ch;
}

.hj-jhub__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hj-3) var(--hj-5);
	margin: var(--hj-6) 0 0;
}

.hj-jhub__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
	background: var(--hj-bone-deep);
}

.hj-jhub__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* -------------------------------------------------------------------------
   Bands: call to action and newsletter
   ---------------------------------------------------------------------- */

.hj-band {
	background: var(--hj-bone-deep);
	padding-block: var(--hj-9);
}

.hj-band + .hj-band {
	border-top: 1px solid var(--hj-line);
}

.hj-band__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--hj-8);
	align-items: center;
}

.hj-band--collectors .hj-band__media {
	order: 2;
}

.hj-band__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
}

.hj-band__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hj-band__text {
	margin: var(--hj-4) 0 0;
	max-width: 50ch;
	color: var(--hj-ink-soft);
}

.hj-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hj-3) var(--hj-5);
	margin: var(--hj-6) 0 0;
}

.hj-band .hj-signup {
	max-width: 46ch;
}

.hj-band .hj-signup > .hj-small {
	margin-top: var(--hj-4);
}

/* Two doors side by side (artist / collector) */

.hj-doors {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hj-6);
}

.hj-band--door {
	padding: 0;
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
	overflow: hidden;
}

.hj-band--door .hj-band__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
}

.hj-band--door .hj-band__media {
	order: 0;
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--hj-line);
}

.hj-band--door .hj-band__body {
	padding: var(--hj-6);
}

.hj-band--door .hj-display-l {
	font-size: var(--hj-size-display-m);
	line-height: var(--hj-leading-display-m);
}

@media (max-width: 900px) {
	.hj-band {
		padding-block: var(--hj-8);
	}

	/* The door cards own their spacing; the band padding above must not return. */
	.hj-band.hj-band--door {
		padding-block: 0;
	}

	.hj-band__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hj-6);
	}

	.hj-band--collectors .hj-band__media {
		order: 0;
	}

	.hj-doors {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.hj-signup__row {
		flex-direction: column;
	}

	.hj-band--door .hj-band__body {
		padding: var(--hj-5);
	}
}

/* -------------------------------------------------------------------------
   "Made by hand" photo strip (journal index)
   ---------------------------------------------------------------------- */

.hj-jstrip {
	padding-block: var(--hj-9);
}

.hj-jstrip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--hj-5) var(--hj-6);
	margin-bottom: var(--hj-7);
}

.hj-jstrip__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--hj-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hj-jstrip__grid li {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
	background: var(--hj-bone-deep);
}

.hj-jstrip__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.hj-jstrip {
		padding-block: var(--hj-8);
	}

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

	.hj-jstrip__grid li:nth-child(n + 4) {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Single article
   ---------------------------------------------------------------------- */

.hj-jpost__head {
	padding-block: var(--hj-8) var(--hj-6);
}

.hj-jpost__cat a {
	color: var(--hj-stone);
	text-decoration: none;
}

.hj-jpost__cat a:hover {
	color: var(--hj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hj-jpost__title {
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.005em;
	max-width: 22ch;
	margin: var(--hj-2) 0 var(--hj-5);
}

.hj-jpost__deck {
	max-width: 52ch;
	margin: 0 0 var(--hj-5);
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--hj-ink-soft);
}

.hj-jpost__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hj-1) var(--hj-2);
	margin: 0;
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
}

/* Header, hero, body and footer row share one 1100px column so every left
   edge lines up: prose on the left, contents on the right. */
.hj-jpost__headwrap,
.hj-jbody,
.hj-jpost__foot {
	max-width: calc(1100px + 2 * var(--hj-gutter));
}

.hj-jhero {
	max-width: calc(1100px + 2 * var(--hj-gutter));
	margin: 0 auto var(--hj-8);
	padding-inline: var(--hj-gutter);
}

.hj-jhero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
	background: var(--hj-bone-deep);
}

/* Body: prose column plus sticky contents on wide screens. On narrow screens
   the contents sit above the text and start collapsed (see hj_blog_toc()). */

.hj-jbody {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hj-6);
}

.hj-jprose {
	max-width: 68ch;
	width: 100%;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.hj-jaside {
	order: -1;
	max-width: 68ch;
	width: 100%;
}

.hj-jprose h2 {
	scroll-margin-top: 104px;
}

.hj-jprose img {
	border-radius: var(--hj-radius-mat);
}

.hj-tablewrap {
	max-width: 100%;
	overflow-x: auto;
	margin: 0 0 var(--hj-5);
}

.hj-tablewrap table {
	margin-bottom: 0;
}

.hj-jprose blockquote {
	margin: var(--hj-6) 0;
	padding: var(--hj-2) 0 var(--hj-2) var(--hj-5);
	border-left: 2px solid var(--hj-ink);
	font-family: var(--hj-display);
	font-size: 1.375rem;
	line-height: 1.4;
	color: var(--hj-ink);
}

.hj-jprose blockquote p {
	margin: 0;
}

@media (min-width: 1100px) {
	.hj-jbody {
		grid-template-columns: minmax(0, 68ch) 280px;
		gap: var(--hj-7);
		justify-content: space-between;
	}

	.hj-jaside {
		order: 0;
		max-width: none;
		position: sticky;
		top: 112px;
		align-self: start;
	}
}

.hj-toc {
	background: var(--hj-card);
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
	padding: var(--hj-4) var(--hj-5);
}

.hj-toc summary {
	cursor: pointer;
	margin: 0;
	list-style: none;
}

.hj-toc summary::-webkit-details-marker {
	display: none;
}

.hj-toc summary::after {
	content: '+';
	float: right;
	font-size: 1rem;
	line-height: 1;
}

.hj-toc details[open] summary::after {
	content: '\2212';
}

.hj-toc ol {
	list-style: none;
	margin: var(--hj-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--hj-3);
	font-size: var(--hj-size-small);
	line-height: 1.4;
}

.hj-toc a {
	color: var(--hj-ink-soft);
}

.hj-toc a:hover {
	color: var(--hj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* In-article call to action */

.hj-incta {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: var(--hj-5);
	align-items: center;
	margin: var(--hj-8) 0;
	padding: var(--hj-5);
	background: var(--hj-card);
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
}

.hj-incta__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--hj-radius-mat);
}

.hj-incta__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.hj-incta .hj-eyebrow {
	margin-bottom: var(--hj-2);
}

.hj-jprose .hj-incta p {
	max-width: none;
}

.hj-incta__title {
	margin: 0;
	font-family: var(--hj-display);
	font-size: var(--hj-size-display-m);
	line-height: var(--hj-leading-display-m);
	color: var(--hj-ink);
}

.hj-incta__text {
	margin: var(--hj-3) 0 0;
	font-size: var(--hj-size-small);
	line-height: 1.6;
	color: var(--hj-ink-soft);
}

.hj-incta__actions {
	margin: var(--hj-4) 0 0;
}

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

	.hj-incta__media {
		aspect-ratio: 3 / 2;
	}
}

/* Share and publisher note */

.hj-jpost__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hj-6);
	margin-top: var(--hj-8);
	padding-bottom: var(--hj-9);
}

.hj-jpost__foot > * {
	max-width: 68ch;
	width: 100%;
}

.hj-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hj-3) var(--hj-5);
	padding-block: var(--hj-5);
	border-block: 1px solid var(--hj-line);
}

.hj-share .hj-eyebrow {
	margin: 0;
}

.hj-share ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hj-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hj-share a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--hj-3);
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-control);
	text-decoration: none;
}

.hj-share a:hover {
	border-color: var(--hj-ink);
	color: var(--hj-ink);
}

.hj-jpub {
	display: flex;
	align-items: flex-start;
	gap: var(--hj-4);
}

.hj-jpub p {
	margin: 0;
	color: var(--hj-stone);
}

.hj-jpub a {
	color: var(--hj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hj-jrelated {
	padding-top: var(--hj-9);
}