/* ==========================================================================
   The journal — index, archives, search, and the article

   Four templates, one component in four states. The design reference carries
   no blog at all, so this is built from theme.json's own scale rather than
   converted from an export. No value in it is hardcoded and none of it needed
   a new token.

   Two decisions run through the whole file:

   ONE COLUMN. No sidebar anywhere. An article is for reading, and a rail of
   links beside it is a second thing competing with the first.

   THE INDEX IS A LIST, NOT A GRID. Each entry is a full-width row with a
   photograph beside it from 782px up and stacked below it on a phone. A grid
   of cards asks a reader to compare twelve things; a list asks them to read
   one headline at a time, which is the decision they are actually making.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared shell
   -------------------------------------------------------------------------- */

.tfs-journal,
.tfs-article {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

/* Core's constrained layout puts a preset step above every child. The rhythm
   here is set by this file instead, so that second one has to come off or it
   stacks on top of it. */
.tfs-journal > *,
.tfs-article > * {
	margin-block-start: 0;
}

.tfs-journal__head,
.tfs-article__head {
	display: grid;
	gap: var(--wp--custom--step--12);
	margin-block-end: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.tfs-journal__head,
	.tfs-article__head {
		margin-block-end: var(--wp--preset--spacing--60);
	}
}

.tfs-journal__title,
.tfs-article__title {
	margin: 0;
}

/*
 * The journal's own H1 sizes itself. The article's comes from core's post-title
 * block, which carries the display-large preset as a class; this one is a
 * block of this theme's own and has no preset attribute to set, so the step is
 * named here. display-large is the H1 size every interior page uses — the 60px
 * hero step is the homepage's alone.
 */
.tfs-journal__title {
	font-size: var(--wp--preset--font-size--display-large);
	line-height: var(--wp--custom--line-height--display);
}

/* The archive's term description, where a term has one. Body face: it sits
   directly under the H1 and display type at this size would argue with it —
   the room landing's intro line makes the same call for the same reason. */
.tfs-journal__intro {
	margin: 0;
	max-width: var(--wp--custom--measure);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sub);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-journal__empty {
	margin: 0;
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--sub);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   The index list
   -------------------------------------------------------------------------- */

.tfs-journal__items {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.tfs-journal__items {
		gap: var(--wp--preset--spacing--60);
	}
}

/* core/post-template renders an <li> per entry; the card inside it is the
   article. The list marker is already off above. */
.tfs-journal__items > li {
	margin: 0;
}

/* Every entry but the first opens on a hairline. It is the only separator this
   system has, and it is what keeps a column of articles from reading as one
   long page. */
.tfs-journal__items > li + li {
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

@media (min-width: 782px) {
	.tfs-journal__items > li + li {
		padding-block-start: var(--wp--preset--spacing--60);
	}
}

/* --------------------------------------------------------------------------
   One entry
   -------------------------------------------------------------------------- */

.tfs-post-card {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}

@media (min-width: 782px) {
	/* The photograph takes a little under half the row, the type the rest.
	   minmax(0, …) on both tracks so a long unbroken headline cannot push the
	   row wider than its column. */
	.tfs-post-card {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: var(--wp--preset--spacing--40);
		align-items: center;
	}

	/* With no photograph the type takes the whole row rather than leaving a
	   hole where one would have been. */
	.tfs-post-card--type-led {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tfs-post-card__media {
	min-width: 0;
}

.tfs-post-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wp--custom--aspect--room);
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--placeholder);
}

.tfs-post-card__body {
	display: grid;
	gap: var(--wp--custom--step--8);
	min-width: 0;
}

.tfs-post-card__category {
	margin: 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/*
 * The headline is the display face, which CLAUDE.md reserves for H1 and H2 —
 * and this is an H2, so it is exactly where that face belongs. It sits at the
 * 28px floor on a phone and a step up from 782px.
 */
.tfs-post-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-small);
	letter-spacing: var(--wp--custom--tracking--display);
	line-height: var(--wp--custom--line-height--tight);
}

@media (min-width: 782px) {
	.tfs-post-card__title {
		font-size: var(--wp--preset--font-size--display-medium);
	}
}

/* A headline is not a link affordance, so it does not take link colour — the
   same call the product tile's name makes. */
.tfs-post-card__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tfs-post-card__link:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

/* What makes the whole row clickable without a second tab stop. The card is
   positioned and the body is not, so this resolves against the card and covers
   the photograph too. */
.tfs-post-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* The ring goes round the whole entry, not round the headline alone: what is
   focused should look like what activating it will open. */
.tfs-post-card:has(.tfs-post-card__link:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Where :has() is unsupported the headline rings itself, so a keyboard is never
   left without an indicator. */
@supports not selector(:has(*)) {
	.tfs-post-card__link:focus-visible {
		outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
		outline-offset: var(--wp--custom--focus--offset);
	}
}

.tfs-post-card__excerpt {
	margin: 0;
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

.tfs-post-card__meta,
.tfs-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--custom--step--8);
	margin: 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-post-card__dot,
.tfs-post-meta__dot {
	color: var(--wp--preset--color--rule);
}

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

   Real links to real URLs, the same decision the product listing makes: a
   paginated index has to be crawlable, and an AJAX one is a page that exists
   only for somebody who already arrived.
   -------------------------------------------------------------------------- */

.tfs-journal__pagination {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--hairline);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	gap: var(--wp--custom--step--12);
}

.tfs-journal__pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The page numbers are small targets, so they carry the minimum themselves. */
	min-width: var(--wp--custom--control--tap-target-minimum);
	min-height: var(--wp--custom--control--tap-target-minimum);
	padding-inline: var(--wp--custom--step--8);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.tfs-journal__pagination a:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

.tfs-journal__pagination a:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* The page you are on is not a link, and is marked by weight and colour rather
   than by colour alone. */
.tfs-journal__pagination .page-numbers.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--control--tap-target-minimum);
	min-height: var(--wp--custom--control--tap-target-minimum);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   The article
   -------------------------------------------------------------------------- */

.tfs-post-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
}

.tfs-post-eyebrow__link {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.tfs-post-eyebrow__link:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

.tfs-post-eyebrow__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* The lead photograph runs the full content width — it is the one element on
   the page that is looked at rather than read, so it is not capped at the
   reading measure the body is. */
.tfs-article__lead {
	margin-block: 0 var(--wp--preset--spacing--50);
}

.tfs-article__lead img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--placeholder);
}

/* --------------------------------------------------------------------------
   The body

   Everything a writer will actually reach for, held to one reading column.
   The typography itself is theme.json's: headings, links, captions, quotes,
   tables and separators are all defined there as element and block styles, so
   this file sets measure and rhythm and overrides none of it.

   THE LEFT EDGE. Core sets `margin-inline: auto !important` on every child of a
   constrained container, so a block narrower than its column is centred in it
   and no amount of CSS beats that without an `!important` of our own, which
   CLAUDE.md forbids. Capping the body container itself therefore centred the
   whole article under a flush-left title — two left edges on one page.

   So post-content is a *flow* layout instead and the cap is applied to its
   children here. Flow does not auto-margin anything, so every paragraph,
   heading, list and image starts on the same left edge as the breadcrumb and
   the H1 above them, with the lead photograph running the full content width
   around them. How It's Built reached the same place from the other direction —
   it caps each block because its container has to stay wide — and this is that
   decision applied to a template whose container can simply not be constrained.
   -------------------------------------------------------------------------- */

.tfs-article__body {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.tfs-article__body > * {
	max-width: var(--wp--custom--measure);
	margin-block-start: var(--wp--preset--spacing--30);
}

.tfs-article__body > :first-child {
	margin-block-start: 0;
}

/* A heading opens a section, so it gets more air above it than a paragraph —
   and a paragraph straight after one is that heading's first line, so it gets
   less. */
.tfs-article__body > h2,
.tfs-article__body > h3,
.tfs-article__body > h4 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.tfs-article__body > h2 + *,
.tfs-article__body > h3 + *,
.tfs-article__body > h4 + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* H2 sits at the display floor on a phone and its theme.json size above it.
   Display type never renders below 28px, so there is no mobile step down. */
.tfs-article__body > h2 {
	font-size: var(--wp--preset--font-size--display-small);
}

@media (min-width: 782px) {
	.tfs-article__body > h2 {
		font-size: var(--wp--preset--font-size--display-medium);
	}
}

.tfs-article__body ul,
.tfs-article__body ol {
	padding-inline-start: var(--wp--preset--spacing--30);
}

.tfs-article__body li + li {
	margin-block-start: var(--wp--custom--step--8);
}

/* A quote is already the display face at display-medium in theme.json, and
   core/quote's left border is already off there. What it wants here is the
   indent that makes it read as an aside rather than as a paragraph. */
.tfs-article__body .wp-block-quote {
	margin-block: var(--wp--preset--spacing--50);
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: var(--wp--custom--rule-strong);
}

.tfs-article__body .wp-block-quote cite {
	display: block;
	margin-block-start: var(--wp--custom--step--12);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* An image inside the body stays in the reading column. Its caption is already
   styled by theme.json's caption element. */
.tfs-article__body .wp-block-image {
	margin-block: var(--wp--preset--spacing--40);
}

.tfs-article__body .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	background-color: var(--wp--preset--color--placeholder);
}

.tfs-article__body .wp-block-image figcaption {
	margin-block-start: var(--wp--custom--step--8);
}

/* theme.json colours the separator; what it needs here is the space that makes
   it read as a section break rather than as a rule under a paragraph. */
.tfs-article__body .wp-block-separator {
	margin-block: var(--wp--preset--spacing--60);
	border: 0;
	border-top: var(--wp--custom--hairline);
}

/* --------------------------------------------------------------------------
   What to read next, and the way back to the furniture
   -------------------------------------------------------------------------- */

.tfs-post-relations {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

.tfs-post-relations__heading {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-small);
	letter-spacing: var(--wp--custom--tracking--display);
	line-height: var(--wp--custom--line-height--tight);
}

.tfs-post-relations__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.tfs-post-relations__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tfs-post-relations__item {
	margin: 0;
	min-width: 0;
}

.tfs-post-relations__card {
	position: relative;
	display: grid;
	gap: var(--wp--custom--step--8);
}

.tfs-post-relations__image,
.tfs-post-relations__empty {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wp--custom--aspect--room);
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--placeholder);
	margin-block-end: var(--wp--custom--step--4);
}

.tfs-post-relations__category {
	margin: 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/*
 * Body face, not display. CLAUDE.md reserves the display face for H1 and H2 and
 * this is an H3 — the same correction the product tile's name and the mega
 * menu's collection name both take.
 */
.tfs-post-relations__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sub);
	letter-spacing: 0;
	line-height: var(--wp--custom--line-height--tight);
}

.tfs-post-relations__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tfs-post-relations__link:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

.tfs-post-relations__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tfs-post-relations__card:has(.tfs-post-relations__link:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

@supports not selector(:has(*)) {
	.tfs-post-relations__link:focus-visible {
		outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
		outline-offset: var(--wp--custom--focus--offset);
	}
}

.tfs-post-relations__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* The route back to the catalogue. The journal exists to sell furniture, so an
   article that ends in nothing but more articles has not finished its job. */
.tfs-post-relations__cta {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--20);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

@media (min-width: 600px) {
	.tfs-post-relations__cta {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
	}
}

.tfs-post-relations__cta-copy {
	margin: 0;
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--sub);
	line-height: 1.4;
}

.tfs-post-relations__cta-action {
	margin: 0;
}