/*
 * Journal article styling — a faithful port of the "Modernist" design system
 * as tuned for the Iloilo Beyond the Usual post (cream ground, teal ink,
 * terracotta accent, Archivo type).
 *
 * Every rule is scoped under .wf-journal on purpose. The source design sets
 * body background, global heading fonts, and a global `a` colour; loading any
 * of that unscoped would repaint the dark navy site around it. Scoping keeps
 * the article self-contained so it can sit inside the existing header/footer.
 */

.wf-journal {
	/* Palette — the post's own override of the Modernist defaults. */
	--color-bg: #f6f1e6;
	--color-surface: #fffdf7;
	--color-text: #16333c;
	--color-divider: #16333c;
	--color-accent: #1b4f52;
	--color-accent-100: #e2eae4;
	--color-accent-700: #143b3d;
	--color-accent-900: #0b2223;
	--color-accent-2: #c1503a;
	--color-accent-2-100: #f6e3dd;
	--color-accent-2-700: #9a3d2b;
	--color-accent-2-800: #71261b;
	--color-neutral-100: #f6f1e6;
	--color-neutral-200: #e6dfd0;
	--color-neutral-700: #5d6d70;
	--color-neutral-800: #33474d;

	--journal-heading: "Archivo", system-ui, sans-serif;
	--journal-body: "Archivo", system-ui, sans-serif;

	max-width: 1100px;
	margin-inline: auto;
	padding: 0 32px 96px;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--journal-body);
	font-size: 15px;
	line-height: 1.55;
	font-weight: 400;
}

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

.wf-journal p {
	margin: 0;
	text-wrap: pretty;
}

.wf-journal h1,
.wf-journal h2,
.wf-journal h3 {
	font-family: var(--journal-heading);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.12;
	margin: 0;
}

.wf-journal img {
	display: block;
	max-width: 100%;
}

.wf-journal figure {
	margin: 0;
}

/* Links — the site's global rule strips colour and underline, so restore both. */
.wf-journal a {
	color: var(--color-accent-700);
	text-decoration: none;
	border-bottom: 2px solid var(--color-accent);
	transition: background-color 150ms ease, color 150ms ease;
}

.wf-journal a:hover,
.wf-journal a:focus-visible {
	color: var(--color-accent-900);
	background: var(--color-accent-100);
}

.wf-journal :focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* — masthead — */
.wf-journal__masthead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	border-bottom: 2px solid var(--color-divider);
}

.wf-journal__brand {
	font-family: var(--journal-heading);
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 13px;
	text-transform: uppercase;
}

.wf-journal__masthead-note,
.wf-journal__readtime {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
}

/* — article opening — */
.wf-journal__intro {
	display: grid;
	border-bottom: 2px solid var(--color-divider);
	padding: 56px 0 40px;
}

.wf-journal__meta {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.wf-journal__title {
	font-size: clamp(44px, 7vw, 86px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0 0 24px;
	max-width: 16ch;
	text-wrap: balance;
}

.wf-journal__standfirst {
	font-size: 22px;
	line-height: 1.5;
	max-width: 62ch;
	color: var(--color-neutral-800);
}

/* — figures — */
.wf-journal__hero {
	padding: 40px 0 0;
}

.wf-journal__frame {
	position: relative;
	width: 100%;
	background: var(--color-neutral-200);
	overflow: hidden;
}

.wf-journal__frame--wide { aspect-ratio: 16 / 9; }
.wf-journal__frame--mid { aspect-ratio: 3 / 2; margin-top: 8px; }

.wf-journal__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wf-journal__caption {
	display: flex;
	gap: 16px;
	padding: 12px 0 32px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-neutral-700);
	border-bottom: 2px solid var(--color-divider);
}

.wf-journal__caption-label {
	color: var(--color-accent-2-700);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* — two column layout — */
.wf-journal__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 64px;
	padding-top: 56px;
	align-items: start;
}

.wf-journal__body {
	display: grid;
	gap: 44px;
	min-width: 0;
}

/*
 * Editor-written content. Everything below styles the ordinary output of the
 * WordPress editor, so a writer only supplies prose and headings — the chapter
 * numbers, the drop cap, and the rules between sections are all generated.
 */
.wf-journal__content {
	counter-reset: wf-chapter;
}

.wf-journal__content > * {
	margin: 0;
}

.wf-journal__content > * + * {
	margin-top: 20px;
}

.wf-journal__content > p {
	font-size: 18px;
	line-height: 1.65;
}

/* The opening paragraph carries the drop cap. */
.wf-journal__content > p:first-of-type {
	font-size: 19px;
}

.wf-journal__content > p:first-of-type::first-letter {
	float: left;
	font-family: var(--journal-heading);
	font-weight: 700;
	font-size: 76px;
	line-height: 0.78;
	padding: 4px 14px 0 0;
	color: var(--color-accent-2);
}

/* Each H2 becomes a numbered chapter — 01, 02, 03 — without the writer
   typing a number or the count ever going stale after a reorder. */
.wf-journal__content > h2 {
	counter-increment: wf-chapter;
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 2px solid var(--color-divider);
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.wf-journal__content > h2::before {
	content: counter(wf-chapter, decimal-leading-zero);
	flex: none;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--color-accent);
}

/* An H2 marked with this class is a plain section heading — no number, for
   things like a closing directory or summary table. */
.wf-journal__content > h2.is-unnumbered {
	counter-increment: none;
}

.wf-journal__content > h2.is-unnumbered::before {
	content: none;
}

.wf-journal__content > h3 {
	margin-top: 32px;
	font-size: 22px;
	line-height: 1.2;
}

.wf-journal__content > ul,
.wf-journal__content > ol {
	padding-left: 1.25rem;
	font-size: 18px;
	line-height: 1.65;
}

.wf-journal__content > ul li + li,
.wf-journal__content > ol li + li {
	margin-top: 8px;
}

.wf-journal__content > blockquote {
	margin-top: 32px;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--color-accent-2);
	font-size: 21px;
	line-height: 1.5;
	color: var(--color-neutral-800);
}

.wf-journal__content > figure {
	margin-top: 32px;
}

.wf-journal__content > figure img {
	width: 100%;
	height: auto;
}

.wf-journal__content > figure figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-neutral-700);
}

.wf-journal__content > .wp-block-image,
.wf-journal__content > .wp-block-table {
	margin-top: 32px;
}

/* Bespoke blocks an article may drop into its content. */
.wf-journal__section {
	border-top: 2px solid var(--color-divider);
	padding-top: 28px;
}

.wf-journal__section > h2 {
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}

/* — area directory — */
.wf-journal__areas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	border: 2px solid var(--color-divider);
	font-size: 14px;
	line-height: 1.5;
}

.wf-journal__area {
	padding: 20px;
	border-right: 2px solid var(--color-divider);
}

.wf-journal__area:last-child {
	border-right: 0;
}

.wf-journal__area-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
}

.wf-journal__area-num {
	font-family: var(--journal-heading);
	font-weight: 700;
	color: var(--color-accent-2);
}

.wf-journal__area-label {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
}

.wf-journal__area-addr {
	color: var(--color-neutral-700);
	margin-top: 6px;
}

/* — trail table — */
.wf-journal .table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.wf-journal .table th {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	padding: 8px;
	border-bottom: 2px solid var(--color-divider);
}

.wf-journal .table td {
	padding: 8px;
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 40%, transparent);
}

.wf-journal .table tbody tr:hover {
	background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

/* — closing call to action — */
.wf-journal__cta {
	background: var(--color-accent);
	color: var(--color-neutral-100);
	padding: 48px 40px;
	display: grid;
	gap: 20px;
}

.wf-journal__cta-title {
	font-family: var(--journal-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.wf-journal__cta p:not(.wf-journal__cta-title) {
	font-size: 18px;
	line-height: 1.6;
	max-width: 46ch;
	color: var(--color-accent-100);
}

.wf-journal__cta .btn {
	justify-self: start;
	background: var(--color-neutral-100);
	color: var(--color-accent-900);
	border-color: var(--color-neutral-100);
}

.wf-journal__cta .btn:hover,
.wf-journal__cta .btn:focus-visible {
	background: #fff;
	color: var(--color-accent-900);
}

/* — buttons and tags — */
.wf-journal .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--journal-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	padding: 8px 15px;
	border: 1px solid transparent;
	border-radius: 0;
}

.wf-journal .tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	letter-spacing: 0.02em;
	padding: 3px 10px;
	border-radius: 0;
}

.wf-journal .tag-accent {
	background: var(--color-accent-100);
	color: var(--color-accent-2-800);
}

.wf-journal .tag-outline {
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
}

/* — sidebar — */
.wf-journal__aside {
	display: grid;
	gap: 32px;
	position: sticky;
	top: 32px;
}

.wf-journal__aside-block {
	border-top: 2px solid var(--color-divider);
	padding-top: 16px;
}

.wf-journal__aside-label {
	font-family: var(--journal-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 14px;
}

.wf-journal__aside-body {
	font-size: 14px;
	line-height: 1.6;
}

.wf-journal__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wf-journal__cats {
	font-size: 13px;
	color: var(--color-neutral-700);
	margin-top: 14px;
	line-height: 1.5;
}

@media (max-width: 63.99rem) {
	.wf-journal__layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.wf-journal__aside {
		position: static;
	}
}

@media (max-width: 47.99rem) {
	.wf-journal {
		padding: 0 20px 64px;
	}

	.wf-journal__masthead {
		flex-direction: column;
		gap: 8px;
	}

	.wf-journal__intro {
		padding: 40px 0 32px;
	}

	.wf-journal__standfirst {
		font-size: 19px;
	}

	.wf-journal__dropcap {
		font-size: 58px;
		padding-right: 10px;
	}

	.wf-journal__area {
		border-right: 0;
		border-bottom: 2px solid var(--color-divider);
	}

	.wf-journal__area:last-child {
		border-bottom: 0;
	}

	.wf-journal__cta {
		padding: 32px 24px;
	}

	/* A five-day itinerary is unreadable squeezed into three columns on a
	   phone, so each row restacks into a labelled block. */
	.wf-journal .table,
	.wf-journal .table tbody,
	.wf-journal .table tr,
	.wf-journal .table td {
		display: block;
		width: 100%;
	}

	.wf-journal .table thead {
		display: none;
	}

	.wf-journal .table tr {
		border-bottom: 2px solid var(--color-divider);
		padding: 12px 0;
	}

	.wf-journal .table td {
		border: 0;
		padding: 2px 0;
	}

	.wf-journal .table td:first-child {
		font-family: var(--journal-heading);
		font-weight: 700;
	}
}