/**
 * FULLOAT — Journal styles.
 *
 * Uses only the tokens already defined in style.css: --ink, --flame,
 * --cream-bg, --ink-soft, --line-warm, --wrap, --body. No new colours,
 * no new typefaces. Everything is namespaced .jrnl- so it cannot collide
 * with product or cart styles.
 *
 * Signature: the spec strip. Post metadata is set like a garment care
 * label, in the same visual grammar the store uses for 220 GSM / S-XL.
 */

/* ---------- Head block ---------- */

.jrnl-head {
	background: var(--ink);
	color: #fff;
	padding: 56px 0 44px;
}

.jrnl-head-in {
	max-width: 760px;
}

.jrnl-crumbs {
	font-family: var(--body);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ash);
	margin: 0 0 22px;
}

.jrnl-crumbs a {
	color: var(--ash);
	text-decoration: none;
}

.jrnl-crumbs a:hover,
.jrnl-crumbs a:focus-visible {
	color: var(--flame);
}

.jrnl-crumbs span {
	margin: 0 8px;
	opacity: .5;
}

.jrnl-eyebrow {
	font-family: var(--body);
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--flame);
	margin: 0 0 14px;
}

.jrnl-title {
	font-family: var(--display);
	font-size: clamp(28px, 5vw, 46px);
	line-height: 1.12;
	letter-spacing: -.01em;
	margin: 0;
	text-wrap: balance;
}

.jrnl-title-index {
	margin-bottom: 4px;
}

.jrnl-blurb {
	font-size: 14px;
	line-height: 1.65;
	color: var(--ash);
	margin-top: 14px;
	max-width: 52ch;
}

.jrnl-blurb p {
	margin: 0;
}

/* ---------- Spec strip (signature) ---------- */

.jrnl-spec {
	font-family: var(--body);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ash);
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.jrnl-spec-sep {
	margin: 0 10px;
	color: var(--flame);
}

/* On light cards the strip inverts. */

.jrnl-card .jrnl-spec {
	color: var(--ink-soft);
	border-top-color: var(--line-warm);
	margin: 0 0 12px;
	padding-top: 0;
	border-top: 0;
}

/* ---------- Hero image ---------- */

.jrnl-hero {
	margin: 0;
	background: linear-gradient(to bottom, var(--ink) 0 50%, var(--cream-bg) 50% 100%);
}

.jrnl-hero-img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line-warm);
}

.jrnl-cap {
	font-family: var(--body);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--ink-soft);
	margin: 10px 0 0;
}

/* ---------- Article body ---------- */

.jrnl-body {
	max-width: 68ch;
	margin: 48px auto 0;
	font-size: 16px;
	line-height: 1.78;
	color: var(--ink-text);
}

.jrnl-body > * + * {
	margin-top: 1.35em;
}

.jrnl-body h2 {
	font-family: var(--display);
	font-size: clamp(21px, 3vw, 27px);
	line-height: 1.25;
	letter-spacing: -.01em;
	margin-top: 2.1em;
}

.jrnl-body h3 {
	font-family: var(--display);
	font-size: clamp(17px, 2.4vw, 20px);
	line-height: 1.3;
	margin-top: 1.9em;
}

.jrnl-body a {
	color: var(--ink-text);
	text-decoration: underline;
	text-decoration-color: var(--flame);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.jrnl-body a:hover,
.jrnl-body a:focus-visible {
	color: var(--flame);
}

.jrnl-body img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--line-warm);
}

.jrnl-body ul,
.jrnl-body ol {
	padding-left: 1.3em;
}

.jrnl-body li + li {
	margin-top: .5em;
}

.jrnl-body blockquote {
	border-left: 3px solid var(--flame);
	padding-left: 20px;
	margin-left: 0;
	color: var(--ink-soft);
}

.jrnl-body blockquote p {
	margin: 0;
}

.jrnl-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.jrnl-body th,
.jrnl-body td {
	border: 1px solid var(--line-warm);
	padding: 10px 12px;
	text-align: left;
}

.jrnl-body th {
	background: var(--cream-2);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---------- Tags, share ---------- */

.jrnl-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	max-width: 68ch;
	margin: 40px auto 0;
}

.jrnl-tags a {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink-soft);
	border: 1px solid var(--line-warm);
	padding: 6px 11px;
}

.jrnl-tags a:hover,
.jrnl-tags a:focus-visible {
	color: var(--ink);
	border-color: var(--ink);
}

.jrnl-share {
	max-width: 68ch;
	margin: 28px auto 0;
	padding: 18px 0;
	border-top: 1px solid var(--line-warm);
	border-bottom: 1px solid var(--line-warm);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.jrnl-share-label {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.jrnl-share-link {
	font-family: var(--body);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink-text);
	background: none;
	border: 0;
	border-bottom: 2px solid var(--flame);
	padding: 2px 0;
	cursor: pointer;
}

.jrnl-share-link:hover,
.jrnl-share-link:focus-visible {
	color: var(--flame);
}

/* ---------- Related products ---------- */

/* Layout comes from .related-band in style.css - do not duplicate it here,
   or the padding doubles and the responsive breakpoints stop matching. */

.jrnl-shop .jrnl-eyebrow {
	color: var(--flame);
}

.jrnl-shop-title {
	font-family: var(--display);
	font-size: clamp(22px, 3.4vw, 30px);
	margin: 0 0 30px;
}

/* ---------- Prev / next ---------- */

.jrnl-nav {
	background: var(--ink);
	color: #fff;
	padding: 34px 0;
}

.jrnl-nav-in {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	justify-content: space-between;
}

.jrnl-nav-link {
	text-decoration: none;
	color: #fff;
	max-width: 46%;
	min-width: 220px;
}

.jrnl-nav-next {
	text-align: right;
	margin-left: auto;
}

.jrnl-nav-dir {
	display: block;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--flame);
	margin-bottom: 7px;
}

.jrnl-nav-name {
	display: block;
	font-size: 14px;
	line-height: 1.4;
}

.jrnl-nav-link:hover .jrnl-nav-name,
.jrnl-nav-link:focus-visible .jrnl-nav-name {
	color: var(--flame);
}

/* ---------- Index cards ---------- */

.jrnl-index {
	padding: 56px 0 80px;
}

.jrnl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 34px 26px;
}

/* The newest post runs wide and horizontal. With two or three posts
   published this reads as an editorial lead rather than a lonely tile. */
@media (min-width: 900px) {

	.jrnl-cards > .jrnl-card:first-child {
		grid-column: span 2;
		flex-direction: row;
		gap: 26px;
		align-items: stretch;
	}

	.jrnl-cards > .jrnl-card:first-child .jrnl-card-media {
		flex: 0 0 52%;
		margin-bottom: 0;
		aspect-ratio: auto;
	}

	.jrnl-cards > .jrnl-card:first-child .jrnl-card-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 6px 0;
	}

	.jrnl-cards > .jrnl-card:first-child .jrnl-card-title {
		font-size: 25px;
	}

	.jrnl-cards > .jrnl-card:first-child .jrnl-card-excerpt {
		font-size: 14.5px;
	}
}

.jrnl-card {
	display: flex;
	flex-direction: column;
}

.jrnl-card-media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ink);
	border: 1px solid var(--line-warm);
	margin-bottom: 16px;
}

.jrnl-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.jrnl-card:hover .jrnl-card-img {
	transform: scale(1.04);
}

.jrnl-card-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--flame);
	font-size: 13px;
	letter-spacing: .34em;
}

.jrnl-card-title {
	font-family: var(--display);
	font-size: 19px;
	line-height: 1.32;
	margin: 0 0 10px;
}

.jrnl-card-title a {
	color: var(--ink-text);
	text-decoration: none;
}

.jrnl-card-title a:hover,
.jrnl-card-title a:focus-visible {
	color: var(--flame);
}

.jrnl-card-excerpt {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 0 14px;
}

.jrnl-card-more {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-text);
	border-bottom: 2px solid var(--flame);
	align-self: flex-start;
	padding-bottom: 2px;
	margin-top: auto;
}

/* ---------- Empty state ---------- */

.jrnl-empty {
	text-align: center;
	padding: 70px 0;
	border: 1px dashed var(--line-warm);
}

.jrnl-empty-line {
	font-size: 14px;
	color: var(--ink-soft);
	margin: 0 0 20px;
}

.jrnl-empty-cta {
	display: inline-block;
	background: var(--ink);
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 13px 26px;
}

.jrnl-empty-cta:hover,
.jrnl-empty-cta:focus-visible {
	background: var(--flame);
}

/* ---------- Pagination ---------- */

.jrnl-index .pagination,
.jrnl-index .navigation {
	margin-top: 52px;
	display: flex;
	justify-content: center;
}

.jrnl-index .nav-links {
	display: flex;
	gap: 8px;
	align-items: center;
}

.jrnl-index .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	font-size: 13px;
	text-decoration: none;
	color: var(--ink-text);
	border: 1px solid var(--line-warm);
}

.jrnl-index .page-numbers.current,
.jrnl-index .page-numbers:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {

	.jrnl-head {
		padding: 38px 0 32px;
	}

	.jrnl-body {
		margin-top: 34px;
		font-size: 15.5px;
	}

	.jrnl-shop {
		margin-top: 52px;
		padding: 40px 0;
	}

	.jrnl-nav-link {
		max-width: 100%;
	}

	.jrnl-nav-next {
		text-align: left;
		margin-left: 0;
	}
}

/* ---------- Motion preference ---------- */

@media (prefers-reduced-motion: reduce) {

	.jrnl-card-img {
		transition: none;
	}

	.jrnl-card:hover .jrnl-card-img {
		transform: none;
	}
}

/* ---------- Block pattern styles ---------- */

.jrnl-body .jrnl-callout {
	background: var(--cream-2);
	border-left: 3px solid var(--flame);
	padding: 22px 24px;
	margin-top: 2em;
}

.jrnl-body .jrnl-callout > * + * {
	margin-top: .9em;
}

.jrnl-body .jrnl-callout p {
	margin: 0;
}

.jrnl-callout-label {
	font-size: 11px !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--flame);
}

.jrnl-body .jrnl-table table {
	font-size: 13.5px;
}

.jrnl-body .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2em;
}

.jrnl-body .jrnl-btn .wp-block-button__link {
	background: var(--ink);
	color: #fff;
	border-radius: 0;
	font-family: var(--body);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 14px 26px;
	text-decoration: none;
	border: 1px solid var(--ink);
}

.jrnl-body .jrnl-btn .wp-block-button__link:hover,
.jrnl-body .jrnl-btn .wp-block-button__link:focus-visible {
	background: var(--flame);
	border-color: var(--flame);
	color: #fff;
}

.jrnl-body .jrnl-btn.is-style-outline .wp-block-button__link {
	background: none;
	color: var(--ink-text);
}

.jrnl-body .jrnl-btn.is-style-outline .wp-block-button__link:hover,
.jrnl-body .jrnl-btn.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--ink);
	color: #fff;
}

.jrnl-body .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--line-warm);
	margin-top: 2.4em;
}

.jrnl-body figure.wp-block-image {
	margin-left: 0;
	margin-right: 0;
}

/* Diagrams sit full-width in the reading column with a hairline frame. */

.jrnl-body .jrnl-diagram {
	margin-top: 1.8em;
	margin-bottom: 1.8em;
}

.jrnl-body .jrnl-diagram img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line-warm);
}

/* Related products band inside a post: tighten the heading spacing so it
   does not fight the article that precedes it. */

.jrnl-shop .jrnl-eyebrow {
	margin-bottom: 10px;
}