@charset "UTF-8";
/*
 * ManilaShaker 2026 — main stylesheet.
 *
 * Loaded non-blocking (preload + onload) after the inline critical CSS. Budget: 60 KB.
 * Everything here is traceable to docs/09-MEASURED-VALUES.md or docs/04-CSS-TOKENS.md.
 */

/* ================================================================ surfaces
 *
 * Measured: the live Main / Single / Page template renders its section with
 * `background:#FFFFFF`, while the archive, category, tag, search and 404 templates leave the
 * section transparent so the page background (#F9FAFB) shows through. Reproduced with body classes.
 */
.site-main { background: var(--ms-bg-content); }

body.archive .site-main,
body.search .site-main,
body.error404 .site-main { background: transparent; }

/* ================================================================ cards */
.post-grid {
	display: grid;
	gap: var(--ms-card-gap);
	min-width: 0;
}

/* Archives, search, home and the sidebar are single-column stacks — the live site lists one card
   per row (`--bde-posts-per-row` is 1 in all 18 of its declarations). */
.post-grid--list { grid-template-columns: minmax(0, 1fr); }

/* Multi-column grids are only used by the optional homepage/related sections. */
.post-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
	position: relative;
	min-width: 0;
}

/*
 * Listing card — measured from the live archive:
 *   .ee-post { height:134px; padding:20px; gap:20px; display:flex; }
 *   thumbnail 150x84 (fixed) · title 20px/700/24px
 *   NO background, NO border-radius, NO box-shadow — the live listing cards are flat.
 */
.card--post {
	display: flex;
	flex-direction: row;
	gap: var(--ms-component-pad);
	padding: var(--ms-component-pad);
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.card--post .card__media {
	display: block;
	flex: 0 0 150px;
	width: 150px;
	max-width: 150px;
	overflow: hidden;
	border-radius: var(--ms-radius-control);
	/* Kill the inline baseline gap so the media box is exactly the image height. */
	line-height: 0;
	font-size: 0;
}

.card--post .entry-thumbnail__img,
.card--post .card__media img {
	width: 150px;
	height: 84px;
	aspect-ratio: auto;
	object-fit: cover;
}

.card--post .card__title { font-size: 20px; font-weight: 700; line-height: 24px; }

/* White boxed variant — used only by the optional homepage/related sections. */
.card--grid {
	flex-direction: column;
	padding: var(--ms-component-pad);
	background: var(--ms-bg-content);
	border-radius: var(--ms-radius-card);
	box-shadow: var(--ms-shadow-card);
}

.card--grid .card__media { flex: 0 0 auto; width: 100%; max-width: none; }

.card--grid .entry-thumbnail__img,
.card--grid .card__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.card--grid .card__title { font-size: 16px; line-height: 1.3; }

/*
 * Sidebar / footer mini card — measured live: white box, radius 4, card shadow,
 * 20px padding, image-left ≈40%, title 15px/700/18px.
 */
.card--list {
	flex-direction: row;
	gap: var(--ms-component-pad);
	padding: var(--ms-component-pad);
	/*
	 * Measured on the live sidebar: the card paints NO background of its own — pixel-sampling the
	 * reference shows the page colour inside the card (#f9fafb on an archive, #fff on an article)
	 * with only the shadow defining the edge. Keeping it transparent makes it correct on both
	 * surfaces automatically.
	 */
	background: transparent;
	border-radius: var(--ms-radius-card);
	box-shadow: var(--ms-shadow-card);
}

.card--list .card__media { flex: 0 0 40%; width: auto; max-width: none; }

.card--list .entry-thumbnail__img,
.card--list .card__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.card--list .card__title { font-size: 15px; font-weight: 700; line-height: 18px; }

/* Homepage lead article — flat, full-width image, larger title. */
.card--lead {
	flex-direction: column;
	padding: 0 0 24px;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.card--lead .card__media { flex: 0 0 auto; width: 100%; max-width: none; border-radius: var(--ms-radius-card); }

.card--lead .entry-thumbnail__img,
.card--lead .card__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
}

.entry-thumbnail { display: block; overflow: hidden; }

.entry-thumbnail--placeholder {
	aspect-ratio: 16 / 9;
	background: var(--ms-grey-200);
}

.card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	color: var(--ms-heading);
}

.card__link { color: inherit; }

.card__link:hover,
.card__link:focus { color: var(--ms-brand); text-decoration: none; }

.card__excerpt {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ms-grey-600);
}

/*
 * Meta row — rebuilt to match the reference: a list of icon+label groups at 12px, font-weight 100
 * (the reference really is that thin), line-height 16.8px, uppercase, icon fill #636363 and an 18px
 * avatar. Group gap is the reference's 25px, snapped to 24px.
 */
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-block-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	font-weight: 100;
	line-height: 16.8px;
	text-transform: uppercase;
	color: var(--ms-grey-500);
}

.entry-meta__item {
	display: flex;
	align-items: center;
	gap: var(--ms-stack-tight);
	margin: 0;
	min-width: 0;
}

.entry-meta__item a { color: inherit; }

.entry-meta__icon { display: flex; align-items: center; color: #636363; }

.entry-meta__icon svg { display: block; width: 12px; height: 12px; fill: currentColor; }

.entry-meta__avatar img {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.entry-meta__label { white-space: nowrap; }

/* Cards show the author and date only. */
.card--post .entry-meta { font-size: 11px; gap: var(--ms-component-pad); }
.card--post .entry-meta__icon svg { width: 11px; height: 11px; }

/* ================================================================ archive header
 * Measured from the live category page: the heading is a centred, uppercase, 12px/700 label with
 * 15px letter-spacing in #374151, spanning the full main column — and it keeps WordPress's
 * "Category:" / "Tag:" prefix. Reproduced exactly.
 */
.archive-header { margin-bottom: var(--ms-block-gap); }

.archive-header__title {
	margin: var(--ms-component-pad) 0 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 14.4px;
	text-transform: uppercase;
	letter-spacing: 15px;
	text-align: center;
	color: var(--ms-text);
}

.archive-header__description {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ms-grey-600);
	text-align: center;
}

.archive-header__description p:last-child { margin-bottom: 0; }

.archive-header__meta {
	margin: var(--ms-stack-tight) 0 0;
	font-size: 11px;
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: center;
	color: var(--ms-grey-500);
}

/* ================================================================ sections */
.section { margin-top: var(--ms-section-gap); }

.section:first-child { margin-top: 0; }

.section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ms-space-4);
	margin-bottom: var(--ms-heading-gap);
}

.section__title {
	/* The reference gives its module headings `margin: 20px 0` — the top margin is what stops every
	   page column starting 20px higher than it should and keeps main and sidebar aligned. */
	margin: var(--ms-component-pad) 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 14.4px;
	text-transform: uppercase;
	letter-spacing: 15px;
	text-align: center;
	color: var(--ms-text);
}

.section__title--left { text-align: left; letter-spacing: 3px; }

/* A standalone label directly above a listing (homepage) needs air beneath it. */
.layout__main > .section__title { margin-bottom: var(--ms-block-gap); }

.section__more { margin: var(--ms-block-gap) 0 0; text-align: center; }

/* "VIEW ALL" link style (live: 12px/900, letter-spacing 3px, brand colour). */
.section__header a,
.view-all {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ms-brand);
}

/* ================================================================ single / page */
.entry { min-width: 0; }

.entry__header { margin-bottom: var(--ms-block-gap); }

.entry__title {
	margin: 0 0 var(--ms-heading-gap);
	font-size: 48px;
	font-weight: 700;
	line-height: 57.6px;
	color: var(--ms-heading);
	overflow-wrap: anywhere;
}

.entry__featured { margin: 0 0 var(--ms-block-gap); }

.entry__featured img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ms-radius-card);
}

.entry__footer { margin-top: var(--ms-section-gap); }

.entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: var(--ms-block-gap);
	font-size: 12px;
}

.entry__tags a {
	display: inline-block;
	padding: var(--ms-space-1) var(--ms-stack-tight);
	border-radius: var(--ms-radius-control);
	background: var(--ms-grey-100);
	color: var(--ms-grey-700);
}

.entry__tags-label { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ================================================================ post content */
.entry-content {
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
	color: var(--ms-text);
	overflow-wrap: anywhere;
}

/*
 * Article rhythm.
 *
 * NOTE: an `.entry-content p { margin: 0 }` rule used to live here. Because it scores (0,1,1) it
 * BEAT the rhythm rule below at (0,1,0), silently zeroing every paragraph gap and every
 * heading-to-paragraph gap — the page read as one undifferentiated block of text. Spacing is now
 * expressed only through the two low-specificity rules here, so nothing can outrank them by
 * accident.
 *
 * 1.5em of the 18px body size = the live site's measured 27px paragraph rhythm.
 */
.entry-content > * { margin: 0; }

.entry-content > * + * { margin-top: 1.5em; }

/* Headings open a new block, so they take more air than a paragraph. */
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6 { margin-top: var(--ms-page-gap); }

.entry-content > *:first-child { margin-top: 0; }

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-weight: 700;
	line-height: 1.3;
	color: var(--ms-heading);
}

/*
 * In-article heading scale. These are NOT arbitrary: they are the reference's own modular scale
 * (base 12px x ratio 1.25), measured from the live stylesheet as h2 29.30 / h3 23.44 / h4 18.75 /
 * h5 15 / h6 12. Changing them to round numbers would break parity with the reference for no gain.
 */
.entry-content h2 { font-size: 29.3px; }
.entry-content h3 { font-size: 23.44px; }
.entry-content h4 { font-size: 18.75px; }
.entry-content h5 { font-size: 15px; }
.entry-content h6 { font-size: 12px; }

.entry-content a { text-decoration: underline; }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }

.entry-content li + li { margin-top: var(--ms-stack-tight); }

.entry-content blockquote,
.wp-block-quote {
	margin: 0;
	padding: 12px 20px;
	border-left: 4px solid var(--ms-brand);
	background: var(--ms-grey-50);
	color: var(--ms-grey-700);
	font-style: italic;
}

.entry-content blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.entry-content figure { margin: 0; }

.entry-content figcaption,
.wp-caption-text {
	margin-top: var(--ms-stack-tight);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ms-grey-500);
}

.entry-content img { border-radius: var(--ms-radius-card); }

.entry-content table { font-size: 14px; }

.entry-content th,
.entry-content td {
	padding: var(--ms-space-3) var(--ms-space-4);
	border: 1px solid var(--ms-grey-200);
	text-align: left;
}

.entry-content th { background: var(--ms-grey-50); font-weight: 700; }

.entry-content pre {
	overflow-x: auto;
	padding: var(--ms-space-4);
	background: var(--ms-grey-900);
	color: var(--ms-grey-100);
	border-radius: var(--ms-radius-card);
	font-size: 13px;
	line-height: 1.6;
}

.entry-content code { font-size: .9em; }

.entry-content hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ms-grey-200);
}

.alignleft {
	float: left;
	margin: 4px 20px 12px 0;
}

.alignright {
	float: right;
	margin: 4px 0 12px 20px;
}

.aligncenter { display: block; margin-inline: auto; }

.alignwide { width: min(100vw - 40px, 1000px); margin-inline: auto; }

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.embed-wrap,
.wp-block-embed {
	position: relative;
	aspect-ratio: 16 / 9;
}

.embed-wrap iframe,
.embed-wrap embed,
.wp-block-embed iframe { width: 100%; height: 100%; }

.wp-block-embed figcaption { aspect-ratio: auto; }

.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	padding: 0;
	list-style: none;
}

.wp-block-button__link {
	display: inline-block;
	padding: var(--ms-space-3) var(--ms-space-6);
	border-radius: var(--ms-radius-control);
	background: var(--ms-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--ms-brand);
	color: var(--ms-brand);
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.page-links__label { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }

/* ================================================================ sidebar */
.layout__sidebar > * + * { margin-top: var(--ms-component-pad); }

/*
 * Measured on the reference: the sidebar module wrapper paints NO box — the cards inside carry the
 * shadow. An earlier revision boxed this in white with 20px padding, which inset every sidebar card
 * 20px further than the reference.
 */
.widget {
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.widget-title {
	/* The reference gives module headings `margin: 20px 0` on both axes. */
	margin: var(--ms-component-pad) 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 14.4px;
	text-transform: uppercase;
	letter-spacing: 15px;
	text-align: center;
	color: var(--ms-text);
}

.widget ul { margin: 0; padding: 0; list-style: none; }

.widget li + li { margin-top: var(--ms-stack); }

.widget .post-grid--list { gap: var(--ms-component-pad); }



/* No size override here: every list-card title is the same 15px step. */

/* Sidebar module footer ("VIEW ALL") — 12px/900, 3px tracking, centred, brand colour (live values). */
.widget__more {
	margin: var(--ms-heading-gap) 0 0;
	text-align: center;
}

.view-all {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ms-brand);
}

/* ================================================================ ad slots */
.ad-slot {
	position: relative;
	min-height: 0;
	margin: 0;
	background: none;
	border: 0;
	text-align: center;
	overflow: hidden;
}

.ad-slot:empty { display: none; }

/* Reserve the ad's space to avoid layout shift (CLS) while it loads. */
.ad-slot__reserve {
	display: block;
	width: 100%;
	aspect-ratio: var(--ad-ratio, 728 / 90);
}

.ad-slot > *:not(.ad-slot__reserve) { margin-inline: auto; }

.layout__sidebar .ad-slot__reserve { aspect-ratio: var(--ad-ratio, 347 / 290); }

.ad-slot--header { margin: var(--ms-component-pad) 0 0; }

/* ================================================================ pagination */
/*
 * Pagination — the reference centres it and uses bare text links ("1 2 3 … 849 Next »"), not
 * boxed buttons. Measured values: container margin-top 24px, list gap 16px, link padding 0 12px.
 */
.pagination { margin-top: var(--ms-block-gap); }

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ms-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination__item a,
.pagination__item span {
	display: inline-block;
	padding: 0 var(--ms-space-3);
	background: none;
	border-radius: 0;
	box-shadow: none;
	color: var(--ms-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.pagination__item a:hover,
.pagination__item a:focus { color: var(--ms-brand); text-decoration: underline; }

.pagination__item .current { color: var(--ms-brand); font-weight: 700; }

.pagination__item .dots { color: var(--ms-grey-400); }

/* ================================================================ post navigation */
.post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ms-space-4);
	margin-top: var(--ms-section-gap);
}

.post-nav .nav-previous,
.post-nav .nav-next { min-width: 0; }

.post-nav a {
	display: block;
	padding: var(--ms-space-4);
	background: var(--ms-bg-content);
	border-radius: var(--ms-radius-card);
	box-shadow: var(--ms-shadow-card);
	color: var(--ms-text);
}

.post-nav a:hover,
.post-nav a:focus { box-shadow: 0 4px 24px rgba(0, 0, 0, .12); text-decoration: none; }

.post-nav__label {
	display: block;
	margin-bottom: var(--ms-stack-tight);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ms-grey-500);
}

.post-nav__title { font-size: 14px; font-weight: 700; color: var(--ms-heading); }

/* ================================================================ author box / related */
.author-box {
	display: flex;
	gap: var(--ms-space-4);
	padding: var(--ms-component-pad);
	margin-bottom: var(--ms-block-gap);
	background: var(--ms-bg-content);
	border-radius: var(--ms-radius-card);
	box-shadow: var(--ms-shadow-card);
}

.author-box__avatar img { border-radius: 50%; display: block; }

.author-box__name { margin: 0 0 var(--ms-stack-tight); font-size: 16px; }

.author-box__bio { margin: 0 0 var(--ms-stack-tight); font-size: 13px; font-weight: 400; line-height: 1.6; }

.author-box__link { font-size: 12px; font-weight: 700; }

.related-posts { margin-top: var(--ms-section-gap); }

.related-posts .section__title { margin-bottom: var(--ms-heading-gap); }

/* ================================================================ forms */
.search-form {
	display: flex;
	align-items: stretch;
	gap: 0;
	max-width: 560px;
}

.search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--ms-space-3) var(--ms-space-4);
	background: #fff;
	border: 1px solid var(--ms-grey-300);
	border-right: 0;
	border-radius: var(--ms-radius-control) 0 0 var(--ms-radius-control);
	color: var(--ms-text);
	font-size: 12px;
	font-weight: 400;
}

.search-form__field:focus {
	outline: none;
	border-color: var(--ms-brand);
	box-shadow: 0 0 2px var(--ms-brand);
}

.search-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	background: var(--ms-brand);
	border-radius: 0 var(--ms-radius-control) var(--ms-radius-control) 0;
	color: #fff;
}

.search-form__icon {
	display: block;
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-radius: 50%;
	position: relative;
}

.search-form__icon::after {
	content: "";
	position: absolute;
	right: -5px;
	bottom: -3px;
	width: 7px;
	height: 2px;
	background: currentColor;
	transform: rotate(45deg);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: var(--ms-space-3) var(--ms-space-4);
	background: #fff;
	border: 1px solid var(--ms-grey-300);
	border-radius: var(--ms-radius-control);
	color: var(--ms-text);
	font-size: 12px;
}

textarea { min-height: 120px; resize: vertical; }

.button,
input[type="submit"],
button[type="submit"] {
	display: inline-block;
	padding: var(--ms-space-3) var(--ms-space-6);
	background: var(--ms-brand);
	border: 1px solid transparent;
	border-radius: var(--ms-radius-control);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
}

.button:hover,
.button:focus,
input[type="submit"]:hover,
button[type="submit"]:hover { text-decoration: none; opacity: .92; }

.button--secondary {
	background: transparent;
	border-color: var(--ms-brand);
	color: var(--ms-brand);
}

/* ================================================================ comments */
.comments { margin-top: var(--ms-section-gap); }

.comments__title,
.comments__reply-title { font-size: 18px; margin-bottom: var(--ms-heading-gap); }

.comments__list { margin: 0; padding: 0; list-style: none; }

.comments__list ol.children { margin: 0; padding-left: 24px; list-style: none; }

.comment-body {
	padding: var(--ms-component-pad);
	margin-bottom: var(--ms-space-4);
	background: var(--ms-bg-content);
	border-radius: 10px;
	box-shadow: var(--ms-shadow-header);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: var(--ms-stack-tight);
	margin-bottom: var(--ms-stack-tight);
	font-size: 12px;
}

.comment-author img { border-radius: 50%; display: block; }

.comment-metadata { font-size: 11px; color: var(--ms-grey-500); }

.comment-content { font-size: 14px; font-weight: 400; line-height: 1.6; }

.comment-content p:last-child { margin-bottom: 0; }

.reply { margin-top: var(--ms-stack-2, 8px); font-size: 12px; font-weight: 700; }

.comments__pagination { margin-top: var(--ms-component-pad); }

.comment-form { display: grid; gap: var(--ms-space-4); }

.comment-form p { margin: 0; }

.comment-form label {
	display: block;
	margin-bottom: var(--ms-stack-tight);
	font-size: 12px;
	font-weight: 700;
}

.comment-form__submit { justify-self: start; }

.comment-notes,
.comment-form .logged-in-as { font-size: 12px; font-weight: 400; color: var(--ms-grey-600); }

/* ================================================================ footer
 *
 * Measured from the reference: a #252525 band, 1120px container, three 339px columns with a 32px
 * gap at x=180 / 551 / 921. Column 1 carries the white logo and the blurb; columns 2 and 3 carry a
 * lime pill heading above white cards with thumbnails.
 */
.site-footer {
	/*
	 * Measured on the reference: the gap from the last content element to the footer is ~142px
	 * desktop / 128px mobile, which is the layout's 100px bottom padding PLUS ~40px. Removing this
	 * margin (an earlier revision did) drops the gap to ~100px and visibly cramps the footer.
	 */
	margin-top: var(--ms-space-10);
	padding: var(--ms-space-6) 0;
	background: var(--ms-footer-bg);
	color: var(--ms-footer-text);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
}

.site-footer a { color: var(--ms-footer-link); }

.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ms-column-gap);
}

.site-footer__col { min-width: 0; }

.site-footer__logo-link { display: block; }

.site-footer__logo {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--ms-block-gap);
}

.site-footer__blurb { margin: 0; color: var(--ms-footer-text); }

.site-footer__empty { margin: 0; color: var(--ms-footer-text); }

/*
 * Pill heading. The 10px/50px padding and 10px margin are the reference's own measured values for
 * this pill; they are optical values for a 100px-radius capsule, not layout rhythm, so they are
 * kept exactly rather than snapped to the spacing scale.
 */
.site-footer__heading {
	/* 10px is the reference pill's optical padding; the outer margin is snapped to the scale. */
	/* The 10px vertical padding is the reference pill's own optical value. */
	margin: var(--ms-stack-tight) 0 var(--ms-heading-gap);
	padding: 10px var(--ms-space-12);
	background: var(--ms-lime);
	border-radius: 100px;
	color: #000;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
}

/* Footer cards are white here (the sidebar's own cards are transparent) — both measured. */
.site-footer .card--list {
	background: var(--ms-bg-content);
	margin-bottom: var(--ms-component-pad);
}

/*
 * The card title text sits inside `<a class="card__link">`, and `.site-footer a` targets that anchor
 * directly — a direct rule beats inheritance, so the title rendered #e5e7eb on #fff (1.13:1,
 * effectively invisible). The link itself has to be recoloured, not just the heading.
 */
.site-footer .card--list .card__title,
.site-footer .card--list .card__link { color: var(--ms-heading); }

.site-footer .post-grid--list { gap: 0; }

.footer-post-list { margin: 0; padding: 0; list-style: none; }

.footer-post-list__item + .footer-post-list__item { margin-top: var(--ms-stack); }

.footer-post-list__link { font-size: 12px; line-height: 1.5; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ms-space-4);
	margin-top: var(--ms-block-gap);
	padding-top: var(--ms-space-4);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-nav__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-stack-tight) var(--ms-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav__menu li { list-style: none; }

.footer-nav__menu a,
.footer-nav__menu .nav-menu__label { color: var(--ms-footer-link); font-size: 12px; }

.top-nav__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-stack-tight) var(--ms-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.top-nav__menu a { color: rgba(255, 255, 255, .88); font-size: 12px; }

.top-nav__menu a:hover,
.top-nav__menu a:focus { color: #fff; }


/* ================================================================ misc */
.no-results {
	padding: var(--ms-section-gap);
	background: var(--ms-bg-content);
	border-radius: var(--ms-radius-card);
	box-shadow: var(--ms-shadow-card);
}

.no-results__title { font-size: 22px; }

.no-results__text { font-size: 14px; font-weight: 400; }

.no-results__subtitle { font-size: 14px; margin-top: var(--ms-component-pad); }

.no-results__list { font-size: 14px; }
.no-results__list li + li { margin-top: var(--ms-stack-tight); }

.child-pages { margin-top: var(--ms-section-gap); }

.child-pages__list { font-size: 14px; }
.child-pages__list li + li { margin-top: var(--ms-stack-tight); }

.entry-404__heading { font-size: 18px; margin-top: var(--ms-block-gap); }

/* Large "404" numeral — the live error page renders one at ~253x172px. */
.error-numeral {
	margin: 0 0 var(--ms-stack-tight);
	font-size: 172px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -4px;
	color: var(--ms-grey-200);
	text-align: center;
}

@media (max-width: 767px) {
	.error-numeral { font-size: 96px; letter-spacing: -2px; }
}

.entry-404__list { font-size: 14px; }
.entry-404__list li + li { margin-top: var(--ms-stack-tight); }
.entry-404__count { color: var(--ms-grey-500); font-size: 12px; }

.category-index__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-stack-tight);
	margin-bottom: var(--ms-block-gap);
	font-size: 13px;
	font-weight: 700;
}

.category-index__group { margin-top: var(--ms-block-gap); }

.category-index__letter {
	margin: 0 0 var(--ms-stack-tight);
	font-size: 16px;
	font-weight: 700;
	padding-bottom: var(--ms-stack-tight);
	border-bottom: 1px solid var(--ms-grey-200);
}

/* Doubled up on purpose: `.entry-content ul` (0,1,1) would otherwise win the left padding. */
.category-index__list,
.entry-content .category-index__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ms-stack-tight) var(--ms-component-pad);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.category-index__count { color: var(--ms-grey-500); font-size: 12px; margin-left: var(--ms-stack-tight); }

.attachment-file { font-size: 14px; margin: 0 0 var(--ms-stack-tight); }

.attachment-parent { font-size: 14px; margin: 0 0 var(--ms-space-4); }

/*
 * Homepage listing variant.
 *
 * Measured on the reference: the home template renders the SAME card as the archives but with
 * `padding: 0` and a 10px gap under the row, so the card is 94px tall and the stack pitch is 114px
 * — against 134px / 149px on the archive templates. That is a real difference in the reference's own
 * templates, reproduced here rather than averaged away. See docs/06-TEMPLATE-MAP.md §5b.
 */
/*
 * Scoped to desktop on purpose: the reference's unpadded home card is a DESKTOP treatment. At
 * <=767px its own mobile home card is padded like every other listing card, so applying the
 * unpadded variant at mobile width made the home listing roughly 30% shorter than the reference.
 */
@media (min-width: 768px) {
	/* The reference's home row carries a 10px bottom gap (pitch 114px); kept verbatim. */
	.home .card--row { padding: 0; margin-bottom: 10px; }
}

/* ================================================================ per-template rhythm
 *
 * Measured per template on the reference: main / single / page sections pad at 50px, while the
 * archive, category, tag, search and 404 templates pad at 48px. The 2px difference is real and is
 * reproduced here rather than averaged away.
 */
body.archive .layout,
body.search .layout,
body.error404 .layout { padding-block-start: var(--ms-space-12); }

/* The reference's post-archive template pads at 0, not 48px. */
body.blog .layout { padding-block-start: 0; }

/* ================================================================ responsive */
@media (max-width: 1119px) {
	.site-footer__widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
	.layout { padding-block: var(--ms-space-8) var(--ms-space-16); }
	.entry__title { font-size: 36px; line-height: 1.2; }
	.post-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.entry__title { font-size: 30px; line-height: 1.2; }
	.entry-content { font-size: 17px; line-height: 25px; }
	.entry-content > * + * { margin-top: 1.5em; }
	.post-grid--2,
	.post-grid--3,
	.post-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.post-nav { grid-template-columns: minmax(0, 1fr); }
	.author-box { flex-direction: column; }
	.site-footer__widgets { grid-template-columns: minmax(0, 1fr); }
	.alignleft,
	.alignright { float: none; margin: 0 0 12px; }
}

@media (max-width: 479px) {
	/*
	 * Measured on the reference at 390px: the listing card stays image-LEFT, it does NOT stack.
	 * The thumbnail shrinks to 90x51 and the title to 12px/700/14.4px, giving a ~126px row.
	 * (An earlier revision stacked these vertically, which made every mobile listing ~2.5x taller
	 * than the reference.)
	 */
	/*
	 * IMPORTANT: these target `.card--row`, not `.card--post`. Every variant carries `card--post`,
	 * so a `.card--post .card__media { width:90px }` rule also hit the sidebar and footer mini-cards
	 * and forced a 90px image into a 116px media box.
	 */
	.card--row { flex-direction: row; padding: var(--ms-component-pad); gap: var(--ms-component-pad); }
	.card--row .card__media { flex: 0 0 90px; width: 90px; max-width: 90px; }
	.card--row .entry-thumbnail__img,
	.card--row .card__media img { width: 90px; height: 51px; aspect-ratio: auto; }
	.card--row .card__title { font-size: 12px; line-height: 14.4px; }

	/*
	 * The sidebar mini-card STACKS on mobile in the reference (full-width thumb, ~272px card).
	 * The footer mini-card stays image-left — the two genuinely differ, so they are handled
	 * separately rather than with one rule.
	 */
	.layout__sidebar .card--list { flex-direction: column; }
	.layout__sidebar .card--list .card__media { flex: 0 0 auto; width: 100%; max-width: none; }
	.layout__sidebar .card--list .entry-thumbnail__img,
	.layout__sidebar .card--list .card__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

	/* The reference keeps the archive label at 12px on phones; only the tracking is eased. */
	.archive-header__title { font-size: 12px; line-height: 1.4; letter-spacing: 15px; }

	/* Body copy keeps its 18/26 rhythm on mobile, as on the reference. */
}

/* ================================================================ print */
@media print {
	.site-header,
	.site-footer,
	.layout__sidebar,
	.ad-slot,
	.post-nav,
	.comments,
	.skip-link { display: none !important; }

	body { background: #fff; color: #000; font-size: 12pt; }

	.layout { display: block; padding: 0; }

	a { color: #000; text-decoration: underline; }

	.entry__title { font-size: 24pt; }
}

/* ================================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.sub-menu { transform: none; }
}