/* Blog (11.0), article (11.1) and category archive (11.2), from the Figma
   Blog and Blog details frames. Direction A's chrome and tokens, Option A's
   shared pieces (l-btn, l-h2, l-circle-arrow, --l-wrap, --l-tear) from
   location.css, the yellow button from sections/buttons.css. Everything
   here is bl- prefixed and scoped to body.acs-blog. Sections keep Direction
   A's gap between them. Mobile first; tablets from 640, desktop from 1024. */

body.acs-blog .bl *,
body.acs-blog .bl *::before,
body.acs-blog .bl *::after {
	box-sizing: border-box;
}

body.acs-blog .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.acs-blog .bl .l-btn {
	margin-top: 0;
	justify-content: center;
}

/* Best seafood in town (Direction A's good-time section) closes the page:
   the footer's own gap does the spacing */
body.acs-blog .a-goodtime {
	margin-bottom: 0;
}

/* White photo frame, as the snapshots elsewhere on the site */
body.acs-blog .bl-frame {
	display: block;
	overflow: hidden;
	border-radius: 1rem;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

body.acs-blog .bl-frame img,
body.acs-blog .bl-placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Greyscale stand-in for a story without a photo (CLAUDE.md rule 5) */
body.acs-blog .bl-placeholder {
	background: var(--acs-hover);
}

/* Red bands tucked under the logo row, torn into the paper top and bottom */
body.acs-blog .bl-hero,
body.acs-blog .bl-intro,
body.acs-blog .bl-art-hero {
	position: relative;
	margin-top: -0.5rem;
	background: var(--acs-red);
	color: var(--acs-white);
}

body.acs-blog .bl-hero::before,
body.acs-blog .bl-intro::before,
body.acs-blog .bl-art-hero::before,
body.acs-blog .bl-hero::after,
body.acs-blog .bl-intro::after,
body.acs-blog .bl-art-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-blog .bl-hero::before,
body.acs-blog .bl-intro::before,
body.acs-blog .bl-art-hero::before {
	top: -1px;
	background-image: url("../directions/a/media/masks/hero-top.png");
}

body.acs-blog .bl-hero::after,
body.acs-blog .bl-intro::after,
body.acs-blog .bl-art-hero::after {
	bottom: -1px;
	background-image: url("../directions/a/media/masks/hero-bottom.png");
}

/* ---------- 11.0 Hero: the newest story ---------- */

body.acs-blog .bl-hero {
	padding: 3.5rem var(--acs-gutter) calc(var(--l-tear) + 3rem);
}

body.acs-blog .bl-hero__inner {
	display: grid;
	gap: 2rem;
	max-width: var(--l-wrap);
	margin-inline: auto;
}

body.acs-blog .bl-hero__media {
	transition: transform 0.3s ease;
}

body.acs-blog .bl-hero__media:hover {
	transform: rotate(-1deg);
}

body.acs-blog .bl-hero__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
	line-height: 1.1;
	color: var(--acs-white);
	text-wrap: balance;
}

body.acs-blog .bl-hero__title a {
	color: inherit;
	text-decoration: none;
}

body.acs-blog .bl-hero__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

body.acs-blog .bl-hero__meta {
	margin: 0.875rem 0 0;
	font-size: 0.9375rem;
}

body.acs-blog .bl-hero__excerpt {
	margin: 1.25rem 0 0;
	line-height: 1.6;
}

body.acs-blog .bl-hero .l-btn {
	margin-top: 1.75rem;
}

/* ---------- 11.2 Intro: category name ---------- */

/* Phones: extra top room so the hanging site logo clears the back link */
body.acs-blog .bl-intro {
	padding: 4.75rem var(--acs-gutter) calc(var(--l-tear) + 3rem);
	text-align: center;
}

body.acs-blog .bl-intro__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 1rem;
	color: var(--acs-white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

body.acs-blog .bl-intro__back:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body.acs-blog .bl-intro__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2.75rem, 1.8rem + 4vw, 4.75rem);
	line-height: 1;
	color: var(--acs-white);
}

body.acs-blog .bl-intro__sub {
	margin: 0.875rem auto 0;
	max-width: 32rem;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.5;
}

/* ---------- Story grid ---------- */

body.acs-blog .bl-list {
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin-inline: auto;
}

body.acs-blog .bl-list__title {
	text-align: center;
}

body.acs-blog .bl-list--related .bl-list__title {
	text-align: left;
}

/* Category pills: one scrolling row on phones, bleeding to the screen edge */
body.acs-blog .bl-filters {
	margin: 1.5rem calc(-1 * var(--acs-gutter)) 0;
	overflow-x: auto;
	scrollbar-width: none;
}

body.acs-blog .bl-filters::-webkit-scrollbar {
	display: none;
}

body.acs-blog .bl-list__title + .bl-filters {
	margin-top: 1.75rem;
}

body.acs-blog .bl-filters__list {
	display: flex;
	gap: 0.5rem;
	width: max-content;
	margin: 0;
	padding: 0.25rem var(--acs-gutter);
	list-style: none;
}

body.acs-blog .bl-filter {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 1.125rem;
	border: 1.5px solid var(--acs-ctrl-line);
	border-radius: 999px;
	background: var(--acs-white);
	color: var(--acs-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

body.acs-blog .bl-filter:hover,
body.acs-blog .bl-filter:focus-visible {
	border-color: var(--acs-red);
	color: var(--acs-red);
}

body.acs-blog .bl-filter[aria-current="page"] {
	border-color: var(--acs-red);
	background: var(--acs-red);
	color: var(--acs-white);
}

body.acs-blog .bl-grid {
	display: grid;
	gap: 2.5rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

/* The title link stretches over the card; the tag sits above it */
body.acs-blog .bl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	color: var(--acs-ink);
}

body.acs-blog .bl-card__link {
	color: inherit;
	text-decoration: none;
}

body.acs-blog .bl-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

body.acs-blog .bl-card__link:focus-visible {
	outline: none;
}

body.acs-blog .bl-card:has(.bl-card__link:focus-visible) {
	outline: 2px solid var(--acs-red);
	outline-offset: 6px;
}

body.acs-blog .bl-card .bl-frame {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.acs-blog .bl-card:hover .bl-frame,
body.acs-blog .bl-card:has(.bl-card__link:focus-visible) .bl-frame {
	transform: translateY(-4px) rotate(-1deg);
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
}

body.acs-blog .bl-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 1.125rem;
}

/* Tag: a quiet grey pill (no red, no outline), darkening a touch on hover */
body.acs-blog .bl-tag {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	color: var(--acs-ink-soft);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.acs-blog .bl-tag:hover,
body.acs-blog .bl-tag:focus-visible {
	background: rgba(0, 0, 0, 0.12);
	color: var(--acs-ink);
}

body.acs-blog .bl-card__date {
	color: var(--acs-ink-soft);
	font-size: 0.875rem;
}

body.acs-blog .bl-card__title {
	margin: 0.625rem 0 0;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--acs-ink);
	transition: color 0.2s ease;
}

body.acs-blog .bl-card:hover .bl-card__title {
	color: var(--acs-red);
}

/* Featured story's tag, above its title */
body.acs-blog .bl-hero__tag {
	margin-bottom: 1rem;
}

body.acs-blog .bl-card__excerpt {
	display: -webkit-box;
	margin-top: 0.5rem;
	overflow: hidden;
	color: var(--acs-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

body.acs-blog .bl-card__foot {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Outlined: white inside, grey ring, red arrow; fills red on hover */
body.acs-blog .bl-card .l-circle-arrow {
	background: var(--acs-white);
	box-shadow: inset 0 0 0 1px var(--acs-ctrl-line);
	color: var(--acs-red);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body.acs-blog .bl-card:hover .l-circle-arrow,
body.acs-blog .bl-card:has(.bl-card__link:focus-visible) .l-circle-arrow {
	transform: translateX(4px);
	background: var(--acs-red);
	box-shadow: inset 0 0 0 1px var(--acs-red);
	color: var(--acs-white);
}

body.acs-blog .bl-more {
	display: flex;
	justify-content: center;
	margin: 3rem 0 0;
}

body.acs-blog .bl-more .l-btn[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

body.acs-blog .bl-empty {
	margin: 2.5rem 0 0;
	color: var(--acs-ink-soft);
	text-align: center;
}

/* ---------- 11.1 Article ---------- */

/* Phones: extra top room so the hanging site logo clears the category pill */
body.acs-blog .bl-art-hero {
	padding: 4.75rem var(--acs-gutter) calc(var(--l-tear) + 6rem);
	text-align: center;
}

body.acs-blog .bl-art-hero__cat {
	display: inline-block;
	padding: 0.4375rem 0.875rem;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	color: var(--acs-white);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.acs-blog .bl-art-hero__cat:hover,
body.acs-blog .bl-art-hero__cat:focus-visible {
	background: var(--acs-white);
	color: var(--acs-red);
}

body.acs-blog .bl-art-hero__title {
	max-width: 46rem;
	margin: 1rem auto 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
	line-height: 1.12;
	color: var(--acs-white);
	text-wrap: balance;
}

body.acs-blog .bl-art-hero__date {
	margin: 0.875rem 0 0;
	font-size: 1rem;
}

body.acs-blog .bl-article {
	position: relative;
	z-index: 2;
	width: min(50rem, 100% - 2 * var(--acs-gutter));
	margin: -5.5rem auto 0;
}

body.acs-blog .bl-article__media {
	margin: 0;
	text-align: center;
}

body.acs-blog .bl-article__media .bl-frame img {
	aspect-ratio: 20 / 11;
}

body.acs-blog .bl-article__media figcaption {
	margin-top: 0.75rem;
	color: var(--acs-ink-soft);
	font-size: 0.75rem;
}

body.acs-blog .bl-share {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

/* Round yellow buttons, as the footer's social row */
body.acs-blog .bl-share a,
body.acs-blog .bl-share button {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--acs-yellow);
	color: var(--acs-ink);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body.acs-blog .bl-share a:hover,
body.acs-blog .bl-share a:focus-visible,
body.acs-blog .bl-share button:hover,
body.acs-blog .bl-share button:focus-visible,
body.acs-blog .bl-share button.is-copied {
	background: var(--acs-red);
	color: var(--acs-white);
	transform: translateY(-2px);
}

/* The story: body copy in the column, display-face headings */
body.acs-blog .bl-prose {
	margin-top: 2.5rem;
	color: var(--acs-ink);
	font-size: 1rem;
	line-height: 1.7;
	overflow-wrap: break-word;
}

body.acs-blog .bl-prose > :first-child {
	margin-top: 0;
}

body.acs-blog .bl-prose p,
body.acs-blog .bl-prose ul,
body.acs-blog .bl-prose ol,
body.acs-blog .bl-prose blockquote,
body.acs-blog .bl-prose figure {
	margin: 1.25rem 0 0;
}

body.acs-blog .bl-prose ul,
body.acs-blog .bl-prose ol {
	padding-left: 1.25rem;
}

body.acs-blog .bl-prose li + li {
	margin-top: 0.5rem;
}

body.acs-blog .bl-prose li::marker {
	color: var(--acs-red);
}

body.acs-blog .bl-prose h2,
body.acs-blog .bl-prose h3,
body.acs-blog .bl-prose h4 {
	margin: 3rem 0 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.15;
	color: var(--acs-ink);
	text-wrap: balance;
}

body.acs-blog .bl-prose h2 {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

body.acs-blog .bl-prose h3 {
	margin-top: 2.25rem;
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

body.acs-blog .bl-prose h4 {
	margin-top: 2rem;
	font-size: 1.25rem;
}

body.acs-blog .bl-prose :is(h2, h3, h4) + :is(p, ul, ol) {
	margin-top: 1rem;
}

body.acs-blog .bl-prose a {
	color: var(--acs-red);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body.acs-blog .bl-prose img,
body.acs-blog .bl-prose iframe {
	max-width: 100%;
	height: auto;
}

body.acs-blog .bl-prose iframe {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
}

body.acs-blog .bl-prose blockquote {
	padding-left: 1.25rem;
	border-left: 4px solid var(--acs-red);
	font-size: 1.125rem;
}

/* Tables: a red header row torn along its top, ruled rows; scrolls sideways
   inside its own box on phones */
body.acs-blog .bl-prose .bl-table,
body.acs-blog .bl-prose .wp-block-table {
	position: relative;
	margin: 2.5rem 0 0;
	overflow-x: auto;
}

body.acs-blog .bl-prose .bl-table::before,
body.acs-blog .bl-prose .wp-block-table::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	z-index: 1;
	width: max(100%, 36rem);
	height: 1rem;
	background: url("../directions/a/media/masks/hero-top.png") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-blog .bl-prose table {
	width: 100%;
	min-width: 36rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
}

body.acs-blog .bl-prose th {
	padding: 1.75rem 1.25rem 1.125rem;
	background: var(--acs-red);
	color: var(--acs-white);
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.2;
	text-align: left;
}

body.acs-blog .bl-prose td {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--acs-line);
	vertical-align: top;
}

body.acs-blog .bl-prose td + td {
	border-left: 1px solid var(--acs-line);
}

/* ---------- 11.1 You might also like ---------- */

/* A full-width white band torn top and bottom, its content on the grid,
   so the story ends clearly apart from the footer */
body.acs-blog .bl-list--related {
	position: relative;
	width: 100%;
	margin-top: var(--acs-section-gap);
	padding: calc(var(--l-tear) + 2.5rem) max(var(--acs-gutter), (100% - var(--l-wrap)) / 2);
	background: var(--acs-white);
}

body.acs-blog .bl-list--related::before,
body.acs-blog .bl-list--related::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-blog .bl-list--related::before {
	top: -1px;
	background-image: url("../directions/a/media/masks/hero-top.png");
}

body.acs-blog .bl-list--related::after {
	bottom: -1px;
	background-image: url("../directions/a/media/masks/hero-bottom.png");
}

/* Breadcrumbs on the red bands (template-parts/global/breadcrumbs.php):
   small white type with slashes between, one centred line; on phones the
   current page is cut with an ellipsis rather than wrapping */
body.acs-blog .acs-crumbs {
	max-width: 46rem;
	margin: 0 auto 1.25rem;
	font-size: 0.8125rem;
	line-height: 1.4;
}

body.acs-blog .acs-crumbs__list {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

body.acs-blog .acs-crumbs__item {
	display: flex;
	flex: none;
	align-items: center;
	min-width: 0;
}

body.acs-blog .acs-crumbs__item:last-child {
	flex: 0 1 auto;
	overflow: hidden;
}

body.acs-blog .acs-crumbs__item:last-child > span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.acs-blog .acs-crumbs__item + .acs-crumbs__item::before {
	content: "/";
	margin: 0 0.5rem;
	opacity: 0.6;
}

body.acs-blog .acs-crumbs a {
	color: inherit;
	opacity: 0.85;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.45);
	text-underline-offset: 0.2em;
}

body.acs-blog .acs-crumbs a:hover,
body.acs-blog .acs-crumbs a:focus-visible {
	opacity: 1;
	text-decoration-color: currentColor;
}

body.acs-blog .acs-crumbs [aria-current] {
	font-weight: 700;
}

/* ================= Tablets ================= */

@media (min-width: 640px) {
	body.acs-blog .bl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem 1.5rem;
	}
}

/* ================= Desktop ================= */

@media (min-width: 1024px) {
	body.acs-blog .bl-hero,
	body.acs-blog .bl-intro,
	body.acs-blog .bl-art-hero {
		margin-top: 0;
	}

	body.acs-blog .bl-hero {
		padding: 8.5rem var(--acs-gutter) calc(var(--l-tear) + 4.5rem);
	}

	body.acs-blog .bl-hero__inner {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		align-items: center;
		gap: 3rem;
	}

	body.acs-blog .bl-intro {
		padding: 9rem var(--acs-gutter) calc(var(--l-tear) + 5rem);
	}

	body.acs-blog .bl-art-hero {
		padding: 9rem var(--acs-gutter) calc(var(--l-tear) + 9rem);
	}

	body.acs-blog .bl-article {
		margin-top: -9rem;
	}

	body.acs-blog .bl-filters {
		margin-inline: 0;
		overflow: visible;
	}

	body.acs-blog .bl-filters__list {
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		padding-inline: 0;
	}

	body.acs-blog .bl-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3.5rem 1.5rem;
		margin-top: 2.75rem;
	}

	body.acs-blog .bl-list--related .bl-grid {
		margin-top: 2rem;
	}

	body.acs-blog .bl-list--related {
		padding-block: calc(var(--l-tear) + 4rem);
	}

	body.acs-blog .bl-more {
		margin-top: 3.5rem;
	}
}

/* ---------- Blog listing: the style guide applied (2026-09-29) ----------
   Every text role takes the scale in assets/css/tokens.css, fluid from the
   phone value at 375 to the desktop value at 1440, as on the home page (the
   header, Start your order, the good-time band, the footer and the logo
   follow from direction.css on the listing and its category pages). The
   story cards, tags and category pills are one component wherever they
   show (listing, category pages, You might also like). Button labels, the
   category pills and the card's Crack into the story are UI labels and keep
   their sizes. */

/* H1 / Blog (designer, 2026-09-29): the blog's own H1, 30/40 phones and
   36/44 desktop, for the featured story's title here and the story title on
   each article. Blog only; category pages and every other page keep H1. */
body.acs-blog.blog .bl-hero__title,
body.acs-blog.single-post .bl-art-hero__title {
	font-size: var(--acs-h1-blog-size);
	line-height: var(--acs-h1-blog-lh);
}

/* Category pages: the category name */
body.acs-blog .bl-intro__title {
	font-size: var(--acs-h1-size);
	line-height: var(--acs-h1-lh);
}

body.acs-blog .bl-intro__sub {
	font-size: var(--acs-text-xl-size);
	line-height: var(--acs-text-xl-lh);
}

body.acs-blog.blog .l-h2,
body.acs-blog.category .l-h2,
body.acs-blog .bl-list__title {
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
}

/* Story card titles are headings: H5 in the display face, as the press
   headlines and the location cards */
body.acs-blog .bl-card__title {
	font-family: var(--acs-font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
	text-wrap: balance;
}

body.acs-blog .bl-hero__excerpt {
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

body.acs-blog .bl-card__excerpt,
body.acs-blog .bl-empty {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

body.acs-blog .bl-hero__meta,
body.acs-blog .bl-card__date,
body.acs-blog .bl-intro__back,
body.acs-blog .bl-intro .acs-crumbs {
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
}

/* Tags take the style guide's pill (l-pill: 12px, its padding and
   tracking, capitals centred): grey on the cards, a white outline on the
   red hero */
body.acs-blog .bl-tag,
body.acs-blog .bl-art-hero__cat {
	display: inline-block; /* the cap trim does not apply to a flex box */
	min-height: 0;
	padding: 0.4375rem 0.8125rem 0.3125rem;
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.06em;
}

@supports (text-box: trim-both cap alphabetic) {
	body.acs-blog .bl-tag,
	body.acs-blog .bl-art-hero__cat {
		padding: 0.4375rem 0.8125rem;
		text-box: trim-both cap alphabetic;
	}
}

/* Colours onto the palette: the card tag's grey (black at 6%, 12% on
   hover) is the chip fill and the control fill; the hero tag's outline
   (white at 70%) is white; the featured photo link's unseen text colour
   (the browser's link blue) is ink */
body.acs-blog .bl-tag {
	background: var(--acs-chip-bg);
}

body.acs-blog .bl-tag:hover,
body.acs-blog .bl-tag:focus-visible {
	background: var(--acs-ctrl-bg);
}

body.acs-blog .bl-art-hero__cat {
	border-color: var(--acs-white);
}

body.acs-blog .bl-hero__media {
	color: var(--acs-ink);
}

/* Category pills: text centred as a button's (line height the font size +
   8px, the capitals moved down to the middle; 0.18em of top padding). That
   nudge depends on how the browser rounds the baseline (centred in one,
   1px high in another), so where the box can be trimmed to the capitals the
   pill does what the tags do: the text box is the capitals alone, with equal
   padding above and below, and the 40px height is kept (1.5px border each
   side). */
body.acs-blog .bl-filter {
	line-height: calc(1em + 8px);
	padding-top: 0.18em;
}

@supports (text-box: trim-both cap alphabetic) {
	body.acs-blog .bl-filter {
		display: inline-block;
		min-height: 0;
		padding: calc((2.5rem - 3px - 1cap) / 2) 1.125rem;
		line-height: 1;
		text-box: trim-both cap alphabetic;
	}
}

/* Crack into the story: the circle arrow moves up to the label's centre
   line, as on the other cards */
body.acs-blog .bl-card__foot {
	line-height: calc(1em + 8px);
}

/* measured: the arrow sat 1.2px below the label's capitals */
body.acs-blog .bl-card__foot .l-circle-arrow {
	position: relative;
	top: -0.09em;
}

/* ---------- Featured story centred in the red the eye sees ----------
   Both torn edges cover 0.668 of --l-tear (on desktop the top one is the
   header's own, the same height), so the content sits centred when the top
   and bottom padding match. The top carried less than the bottom on phones
   (43 / 55px of red at 375) and more on desktop (105 / 87 at 1440); the same
   total is now split evenly, so the band keeps its height. */
body.acs-blog .bl-hero {
	padding-top: calc(var(--l-tear) * 0.5 + 3.25rem);
	padding-bottom: calc(var(--l-tear) * 0.5 + 3.25rem);
}

@media (min-width: 1024px) {
	body.acs-blog .bl-hero {
		padding-top: calc(var(--l-tear) * 0.5 + 6.5rem);
		padding-bottom: calc(var(--l-tear) * 0.5 + 6.5rem);
	}
}

/* Category pages: the same even split for the category name's band (its
   content sat low: 114 / 90px of red at 1440; the line's capitals start
   lower in their box than the line's last baseline ends, so the copy
   moves down 0.09rem) */
body.acs-blog .bl-intro {
	padding-top: calc(var(--l-tear) * 0.5 + 3.875rem + 0.09rem);
	padding-bottom: calc(var(--l-tear) * 0.5 + 3.875rem - 0.09rem);
}

@media (min-width: 1024px) {
	body.acs-blog .bl-intro {
		padding-top: calc(var(--l-tear) * 0.5 + 7rem + 0.09rem);
		padding-bottom: calc(var(--l-tear) * 0.5 + 7rem - 0.09rem);
	}
}

/* ---------- Featured story: copy set to the photo's edges (designer) ----------
   Desktop: the tag, title and date start at the photo frame's top edge, the
   description and Crack into the story end at its bottom edge (the copy
   column takes the photo's height and the space between goes in the
   middle). Where the copy runs taller than the photo (the title wraps more
   at 1024), the photo grows to the copy's height, cropped rather than
   stretched, so both edges still meet. The description moves from Body L (18px desktop) to Body Base
   (16px desktop, 12px phones), as the card excerpts. */
body.acs-blog .bl-hero__excerpt {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

/* Two lines at most (designer), ending "…" at the end of the second line
   rather than wherever the excerpt's own cut falls, as the card excerpts */
body.acs-blog .bl-hero__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

@media (min-width: 1024px) {
	body.acs-blog .bl-hero__inner {
		align-items: stretch;
	}

	body.acs-blog .bl-hero__media {
		display: flex;
		flex-direction: column;
	}

	body.acs-blog .bl-hero__media img,
	body.acs-blog .bl-hero__media .bl-placeholder {
		flex: 1 1 auto;
		min-height: 0;
	}

	body.acs-blog .bl-hero__copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	body.acs-blog .bl-hero__meta {
		margin-bottom: 1.25rem; /* the least gap above the description */
	}

	body.acs-blog .bl-hero__excerpt {
		margin-top: auto;
	}
}

/* Story card titles at 20px on every screen (designer: 24px read too big):
   H5's phone value, 20 / 28, held at every width, on the blog, category
   pages and You might also like */
body.acs-blog .bl-card__title {
	font-size: var(--acs-h5-size-mobile);
	line-height: var(--acs-h5-lh-mobile);
}

/* ---------- Article (11.1): the style guide applied (2026-09-29) ----------
   Every text role takes the scale in assets/css/tokens.css, fluid from 375
   to 1440 (the header, footer and logo follow from direction.css). The
   title is H1 / Blog (36/44 desktop, 30/40 phones; above). Headings inside
   the story sit under that title, so they step down from it rather than
   taking the site's H2 and H3, which are larger than H1 / Blog: the story's
   h2 takes H5 and its h3 Body XL's size in the display face. The story
   cards, tags and You might also like follow the blog listing's rules. */
body.acs-blog.single-post .bl-art-hero__date,
body.acs-blog .bl-art-hero .acs-crumbs,
body.acs-blog.single-post .bl-article__media figcaption {
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
}

body.acs-blog.single-post .bl-prose,
body.acs-blog.single-post .bl-prose table {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

body.acs-blog.single-post .bl-prose h2 {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

body.acs-blog.single-post .bl-prose h3,
body.acs-blog.single-post .bl-prose h4,
body.acs-blog.single-post .bl-prose th {
	font-size: var(--acs-text-xl-size);
	line-height: var(--acs-text-xl-lh);
}

body.acs-blog.single-post .bl-prose blockquote {
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

/* Spacing on the scale's rhythm: headings open a new part of the story
   (2.5rem above h2, 2rem above h3), paragraphs 1rem apart */
body.acs-blog.single-post .bl-prose h2 {
	margin-top: 2.5rem;
}

body.acs-blog.single-post .bl-prose :is(h3, h4) {
	margin-top: 2rem;
}

body.acs-blog.single-post .bl-prose :is(p, ul, ol, blockquote, figure) {
	margin-top: 1rem;
}

body.acs-blog.single-post .bl-prose :is(h2, h3, h4) + :is(p, ul, ol) {
	margin-top: 0.75rem;
}

/* Colours onto the palette: the story's rule was the browser's grey inset
   line; the breadcrumb (article and category bands) was white at 85% with
   a 45% underline and 60% slashes, now white */
body.acs-blog.single-post .bl-prose hr {
	height: 0;
	color: var(--acs-line);
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid var(--acs-line);
}

body.acs-blog .acs-crumbs a,
body.acs-blog .acs-crumbs__item + .acs-crumbs__item::before {
	opacity: 1;
}

body.acs-blog .acs-crumbs a {
	text-decoration-color: var(--acs-white);
}

/* The story's calls to action (the old site's .btn / .btn-bt links carried
   in the post content, alone or in a .cta-button / .button-center row) take
   the site's primary button: red, white 14px capitals, the button text
   centring (line height the font size + 8px, capitals moved down their
   0.125em offset), red-deep on hover. They wrap, centred, when long. */
body.acs-blog.single-post .bl-prose a:is(.btn, .btn-bt) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 2.9375rem;
	margin: 0.5rem 0 0;
	padding: calc(0.78125rem + 0.125em) 1.5rem calc(0.78125rem - 0.125em);
	border-radius: var(--acs-radius);
	background: var(--acs-red);
	color: var(--acs-white);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: calc(1em + 8px);
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease;
}

body.acs-blog.single-post .bl-prose a:is(.btn, .btn-bt):hover,
body.acs-blog.single-post .bl-prose a:is(.btn, .btn-bt):focus-visible {
	background: var(--acs-red-deep);
}

body.acs-blog.single-post .bl-prose :is(.cta-button, .button-center) {
	margin-top: 1.5rem;
}

body.acs-blog.single-post .bl-prose .button-center {
	text-align: center;
}

/* The one story with an audio version: the player spans the column */
body.acs-blog.single-post .bl-prose audio {
	display: block;
	width: 100%;
	margin-top: 1.5rem;
}

/* Article hero: the breadcrumb, tag, title and date centred in the red the
   eye sees, between the torn edge above (the header's on desktop, the
   band's own on phones, 0.668 of --l-tear) and the photo pulled up over
   the band. The content sat high: 117px of red above the breadcrumb's
   capitals and 54px from the date to the photo at 1440 (66 / 35 at 375).
   The same total padding is traded from the top to the bottom, so the band
   keeps its height and the photo its place. */
body.acs-blog.single-post .bl-art-hero {
	padding-top: calc(var(--l-tear) * 0.834 + 2.72rem);
	padding-bottom: calc(var(--l-tear) * 0.166 + 8.03rem);
}

@media (min-width: 1024px) {
	body.acs-blog.single-post .bl-art-hero {
		padding-top: calc(var(--l-tear) * 0.834 + 4.625rem);
		padding-bottom: calc(var(--l-tear) * 0.166 + 13.375rem);
	}
}

/* ---------- Article: headings (designer, 2026-09-29) ----------
   The title runs as wide as the photo under it (50rem, was 46rem), so it
   sets on two lines at 1440 instead of three; the breadcrumb follows the
   same width. The story's h2 is 32px on desktop (32/40, H2's phone value,
   held from 1024 up), easing to 24/32 on phones (H4's phone value). You
   might also like takes H3 (40/48 desktop, 28/36 phones); its h2 tag is kept,
   as it opens a section of the page. */
@media (min-width: 1024px) {
	body.acs-blog.single-post .bl-art-hero__title,
	body.acs-blog.single-post .bl-art-hero .acs-crumbs {
		max-width: 50rem;
	}
}

body.acs-blog.single-post .bl-prose h2 {
	font-size: clamp(1.5rem, calc(1.5rem + 8 * (100vw - 23.4375rem) / 625), 2rem);
	line-height: clamp(2rem, calc(2rem + 8 * (100vw - 23.4375rem) / 625), 2.5rem);
}

body.acs-blog.single-post .bl-list--related .bl-list__title {
	font-size: var(--acs-h3-size);
	line-height: var(--acs-h3-lh);
}

/* Story headings fill the column (the photo's width) and wrap only when the
   next word no longer fits (designer): no balanced wrapping, which broke
   them early into even lines */
body.acs-blog.single-post .bl-prose :is(h2, h3, h4, h5, h6) {
	max-width: none;
	text-wrap: wrap;
}

/* ---------- Article hero spacing (designer, 2026-09-29) ----------
   Desktop: the breadcrumb sits higher, and the tag, title and date move
   down towards the photo with an even gap between the three (the title's
   line box trimmed so the gap reads between the letters); the title's line
   height is 42px here only (H1 / Blog elsewhere is 44). The band keeps its
   height and the photo its place. */
@media (min-width: 1024px) {
	body.acs-blog.single-post .bl-art-hero {
		padding-top: calc(var(--l-tear) * 0.834 + 4.625rem - 1.35rem);
		padding-bottom: calc(var(--l-tear) * 0.166 + 13.375rem - 2.35rem);
	}

	body.acs-blog.single-post .bl-art-hero .acs-crumbs {
		margin-bottom: 5.45rem;
	}

	body.acs-blog.single-post .bl-art-hero__title {
		margin-top: 1.25rem;
	}

	body.acs-blog.single-post .bl-art-hero__date {
		margin-top: 0.75rem;
	}
}

/* The article date: 14px on every screen (designer, 2026-09-29) */
body.acs-blog.single-post .bl-art-hero__date {
	font-size: 0.875rem;
	line-height: 1.375rem;
}

/* Story card titles stop at two lines and end in an ellipsis on every card
   (blog, category pages, You might also like; designer, 2026-09-29); the
   full title is on the article. The card link's ::after is positioned on
   the card, so the clip leaves the whole-card tap target intact. */
body.acs-blog .bl-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Every heading in the story (h2, h3, h4) takes H2 / Blog (26/34 desktop,
   22/30 phones), one size for all (designer, 2026-09-30) */
body.acs-blog.single-post .bl-prose :is(h2, h3, h4) {
	font-size: var(--acs-h2-blog-size);
	line-height: var(--acs-h2-blog-lh);
}

/* Category pages: the category name takes H1 / Blog like the rest of the
   blog (designer, 2026-09-30; was H1) */
body.acs-blog .bl-intro__title {
	font-size: var(--acs-h1-blog-size);
	line-height: var(--acs-h1-blog-lh);
}

/* ---------- Blog detail option 2 (client review, 2026-10-02) ----------
   /blog/{slug}/option-2/: the article hero takes the featured story's band
   and layout (photo left, details right, stacked on phones) with the
   breadcrumb across the top and "Scroll to read" in place of the button.
   The story runs under it in the centred 800px column, long paragraphs
   split into short blocks (acs_blog_short_paragraphs()), the share row
   after it. Option 1 (the story's own URL) is unchanged. */
/* one column on phones and tablets: the unwrapped breadcrumb would
   otherwise widen it past the screen */
body.acs-blog-option-2 .bl-hero__inner {
	grid-template-columns: minmax(0, 1fr);
}

body.acs-blog-option-2 .bl-hero__inner > .acs-crumbs {
	grid-column: 1 / -1;
	max-width: none;
	margin: 0;
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
}

body.acs-blog-option-2 .bl-hero .acs-crumbs__list {
	justify-content: flex-start;
}

body.acs-blog-option-2 .bl-hero__media:hover {
	transform: none;
}

body.acs-blog-option-2 .bl-hero__title {
	font-size: var(--acs-h1-blog-size);
	line-height: var(--acs-h1-blog-lh);
}

body.acs-blog-option-2 .bl-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
	color: var(--acs-white);
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

body.acs-blog-option-2 .bl-hero__scroll svg {
	transition: transform 0.2s ease;
}

body.acs-blog-option-2 .bl-hero__scroll:hover,
body.acs-blog-option-2 .bl-hero__scroll:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

body.acs-blog-option-2 .bl-hero__scroll:hover svg,
body.acs-blog-option-2 .bl-hero__scroll:focus-visible svg {
	transform: translateY(3px);
}

/* the story in the article's 800px column, centred on the page (designer,
   2026-10-05; it ran the hero's full width before) */
body.acs-blog.acs-blog-option-2 .bl-article {
	width: min(50rem, 100% - 2 * var(--acs-gutter));
	/* half the section gap under the hero (2.5rem phones, 3.75rem from
	   1024): the story belongs to the hero, a full gap read as a hole
	   (designer, 2026-10-05) */
	margin: 2.5rem auto 0;
	scroll-margin-top: 7rem;
}

/* the share row centred under the story, as option 1's (designer, 2026-10-05) */
body.acs-blog-option-2 .bl-share {
	justify-content: center;
	margin-top: 0;
}

/* the share row closes the story */
body.acs-blog.acs-blog-option-2 .bl-prose + .bl-share {
	margin-top: 2.5rem;
}

/* phones and tablets: each group of sentences its own block, a paragraph
   gap apart; on desktop they run on inside the paragraph */
body.acs-blog-option-2 .bl-chunk {
	display: block;
}

body.acs-blog-option-2 .bl-chunk + .bl-chunk {
	margin-top: 1rem;
}

@media (min-width: 1024px) {
	body.acs-blog-option-2 .bl-chunk {
		display: inline;
	}
}

@media (min-width: 1024px) {
	body.acs-blog-option-2 .bl-hero__inner {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	}

	body.acs-blog.acs-blog-option-2 .bl-article {
		margin-top: 3.75rem;
	}

	body.acs-blog-option-2 .bl-hero__scroll {
		margin-top: 1.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.acs-blog-option-2 .bl-hero__scroll svg {
		transition: none;
	}
}

/* ---------- Article (option 1): photo, share row, story evenly spaced ----------
   The share row sat 24px under the photo and 40px above the story. Both are
   2rem now, measured to what the eye sees: the story's first line carries
   0.375rem of leading above its letters, so its margin gives that back
   (designer, 2026-10-05). Option 2's share row closes the story and is
   untouched. */
body.acs-blog.single-post .bl-article__media + .bl-share {
	margin-top: 2rem;
}

body.acs-blog.single-post .bl-share + .bl-prose {
	margin-top: calc(2rem - 0.375rem);
}

/* Listing and category pages: half the section gap from the red hero (or
   the category intro) to "Latest from the shack." (2.5rem phones, 3.75rem
   from 1024), as under the article hero: after the torn red edge the full
   gap read as a hole (designer, 2026-10-05) */
body.acs-blog main > .bl-hero + .bl-list,
body.acs-blog main > .bl-intro + .bl-list {
	margin-top: 2.5rem;
}

@media (min-width: 1024px) {
	body.acs-blog main > .bl-hero + .bl-list,
	body.acs-blog main > .bl-intro + .bl-list {
		margin-top: 3.75rem;
	}
}

/* A photo inside a story takes the story column's full width with the
   site's 16px corners, as the photo at the top of the story (designer,
   2026-10-07; the old site's photos sat at their own smaller sizes,
   square cornered). */
body.acs-blog.single-post .bl-prose img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: 1rem;
}


/* A story's button sits 24px under the text before it, whether the old
   site wrapped it in a paragraph or a .cta-button row (designer,
   2026-10-07; the spacer paragraphs around the buttons are stripped in
   acs_blog_clean_story()). */
body.acs-blog.single-post .bl-prose p:has(> a:is(.btn, .btn-bt)) {
	margin-top: 1.5rem;
}

body.acs-blog.single-post .bl-prose a:is(.btn, .btn-bt) {
	margin-top: 0;
}

/* Some old stories set their paragraphs in plain boxes: those keep the
   paragraphs' 16px rhythm (they sat with no gap at all). A list at the
   top of a box takes the box's gap, not one of its own. */
body.acs-blog.single-post .bl-prose div:not([class]) {
	margin-top: 1rem;
}

body.acs-blog.single-post .bl-prose div:not([class]) > :first-child {
	margin-top: 0;
}

/* A comparison table has the same 40px under it as above it (the text
   after it sat 16px under, 40 above) */
body.acs-blog.single-post .bl-prose :is(.bl-table, .wp-block-table) + * {
	margin-top: 2.5rem;
}

/* The same where the old site wrapped the table in a plain box: 40px
   above the box and under it */
body.acs-blog.single-post .bl-prose div:not([class]):has(> :is(.bl-table, .wp-block-table)) {
	margin-top: 2.5rem;
}

body.acs-blog.single-post .bl-prose div:not([class]):has(> :is(.bl-table, .wp-block-table)) + * {
	margin-top: 2.5rem;
}

/* Inside a story the points under a heading (h3, h4: the steps, the
   questions) are H3 / Blog, 18/26 on phones and 20/28 on desktop, so they
   read as steps of the h2 above them, which stays H2 / Blog (designer,
   2026-10-07; all three were H2 / Blog, then the points H5 for a moment). */
body.acs-blog.single-post .bl-prose :is(h3, h4) {
	font-size: var(--acs-h3-blog-size);
	line-height: var(--acs-h3-blog-lh);
}

/* An empty paragraph the old markup leaves behind takes no room; a bullet
   holding only a list shows that list without a dot of its own */
body.acs-blog.single-post .bl-prose p:empty {
	display: none;
}

body.acs-blog.single-post .bl-prose li.bl-li-wrap {
	list-style: none;
}

body.acs-blog.single-post .bl-prose li.bl-li-wrap::marker {
	content: none;
}

body.acs-blog.single-post .bl-prose li.bl-li-wrap > :is(ul, ol) {
	margin-top: 0;
}

/* ---------- Old-site markup, drawn the site's way (designer, 2026-10-07) ----------
   A link the old editor also wrapped in <u> showed two lines, the link's
   red one and a black one from the <u>: the <u> draws none. */
body.acs-blog.single-post .bl-prose u {
	text-decoration: none;
}

/* A heading the old editor set in bold or italics is the heading's own
   face: Hobo has one weight, and the browser's made-up bold drew those
   headings heavier than the rest */
body.acs-blog.single-post .bl-prose :is(h2, h3, h4) :is(b, strong, em, i) {
	font-weight: inherit;
	font-style: inherit;
}

/* Story text and its button start at the column's left edge in every
   story (three press releases centred their opening line, one story its
   button) */
body.acs-blog.single-post .bl-prose [align],
body.acs-blog.single-post .bl-prose .button-center {
	text-align: left;
}