/*
Theme Name:   WarmerBills Child
Theme URI:    https://warmerbills.co.uk
Description:  GeneratePress child theme for WarmerBills. Bill-inspired layout: tabular figures, line-item tables, restrained utility palette.
Author:       WarmerBills
Template:     generatepress
Version:      1.1.0
Text Domain:  warmerbills
*/

/* ==========================================================================
   1. TOKENS
   Palette is drawn from UK utility colour marking: gas = amber, electric =
   green, meter casing = slate. Not a mood board.
   ========================================================================== */

:root {
	--wb-ink:        #1B2630;
	--wb-body:       #3D4750;
	--wb-muted:      #667179;
	--wb-green:      #0B6E4F;
	--wb-green-dk:   #085840;
	--wb-green-bg:   #EDF6F2;
	--wb-amber:      #A86200;
	--wb-amber-dk:   #7E4A00;
	--wb-amber-bg:   #FDF6E9;
	--wb-line:       #E1E6E9;
	--wb-line-soft:  #EDF0F2;
	--wb-soft:       #F4F6F7;
	--wb-white:      #FFFFFF;

	--wb-radius:     6px;
	--wb-radius-lg:  10px;

	--wb-content:    760px;
	--wb-gap:        clamp(1.5rem, 4vw, 2.75rem);

	--wb-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wb-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wb-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Every figure on this site aligns like a bill. */
.wb-num,
table td,
table th,
.wb-figure {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
	font-family: var(--wb-text);
	font-size: 18px;
	line-height: 1.65;
	color: var(--wb-body);
	background: var(--wb-soft);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wb-display);
	color: var(--wb-ink);
	letter-spacing: -0.015em;
	line-height: 1.25;
	font-weight: 600;
}

h1 { font-size: 2.35rem; }
h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.25rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }

a {
	color: var(--wb-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.12s ease;
}

a:hover,
a:focus { color: var(--wb-green-dk); }

:focus-visible {
	outline: 2px solid var(--wb-green);
	outline-offset: 2px;
	border-radius: 2px;
}

img { border-radius: var(--wb-radius); }

::selection {
	background: var(--wb-amber-bg);
	color: var(--wb-ink);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. HEADER + NAVIGATION
   ========================================================================== */

.site-header {
	background: var(--wb-white);
	border-bottom: 1px solid var(--wb-line);
}

.site-header .site-title a {
	font-family: var(--wb-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wb-ink);
	text-decoration: none;
}

.site-header .site-description {
	color: var(--wb-muted);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
}

.main-navigation {
	background: var(--wb-white);
	border-bottom: 1px solid var(--wb-line);
}

.main-navigation .main-nav ul li a {
	font-family: var(--wb-display);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wb-body);
	text-decoration: none;
	letter-spacing: -0.005em;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--wb-green);
	background: transparent;
}

/* Current section gets a rule, not a colour block. */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a {
	box-shadow: inset 0 -3px 0 var(--wb-green);
}

.main-navigation .menu-toggle { color: var(--wb-ink); }

/* ==========================================================================
   4. CONTAINERS
   ========================================================================== */

.site-content { gap: var(--wb-gap); }

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-lg);
}

.separate-containers .site-main > *:not(:last-child) { margin-bottom: 1.5rem; }

/* The homepage template supplies its own width, so it opts out of the
   flex container GeneratePress applies to every other page. */
.home .site-content { display: block; }

.home .wb-home {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   5. BREADCRUMBS
   ========================================================================== */

.wb-breadcrumbs {
	font-size: 0.8rem;
	color: var(--wb-muted);
	margin-bottom: 1rem;
	letter-spacing: 0.01em;
}

.wb-breadcrumbs a {
	color: var(--wb-muted);
	text-decoration: none;
}

.wb-breadcrumbs a:hover {
	color: var(--wb-green);
	text-decoration: underline;
}

.wb-breadcrumbs .separator { padding: 0 0.4em; opacity: 0.5; }

/* ==========================================================================
   6. SINGLE POST
   ========================================================================== */

.single .entry-title,
.page .entry-title {
	font-size: clamp(1.9rem, 4.5vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin-bottom: 0.75rem;
}

/* Byline reads like a bill header strip: category, author, date. */
.wb-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	margin-bottom: 1.75rem;
	border-top: 1px solid var(--wb-line);
	border-bottom: 1px solid var(--wb-line);
	font-size: 0.85rem;
	color: var(--wb-muted);
}

.wb-byline__cat {
	font-family: var(--wb-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wb-green);
	text-decoration: none;
	padding: 0.2em 0.6em;
	background: var(--wb-green-bg);
	border-radius: 3px;
}

.wb-byline__cat:hover { color: var(--wb-green-dk); }
.wb-byline__sep { opacity: 0.4; }

.wb-byline__updated {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

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

.entry-content p {
	margin-bottom: 1.35rem;
	line-height: 1.7;
}

.entry-content ul,
.entry-content ol {
	margin-bottom: 1.5rem;
	padding-left: 1.35rem;
}

.entry-content li { margin-bottom: 0.5rem; }

.entry-content li::marker { color: var(--wb-green); }

.entry-content blockquote {
	border-left: 3px solid var(--wb-green);
	border-radius: 0;
	background: var(--wb-green-bg);
	margin: 1.75rem 0;
	padding: 1rem 1.25rem;
	font-style: normal;
	color: var(--wb-ink);
}

.entry-content strong { font-weight: 600; color: var(--wb-ink); }

/* ==========================================================================
   7. TABLES — the site's core content type, set like bill line items
   ========================================================================== */

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0;
	font-size: 0.95rem;
	background: var(--wb-white);
}

.entry-content thead th {
	background: var(--wb-ink);
	color: var(--wb-white);
	font-family: var(--wb-display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	padding: 0.7rem 0.85rem;
	border: none;
}

.entry-content thead th:first-child { border-radius: var(--wb-radius) 0 0 0; }
.entry-content thead th:last-child  { border-radius: 0 var(--wb-radius) 0 0; }

.entry-content tbody td {
	padding: 0.7rem 0.85rem;
	border: none;
	border-bottom: 1px solid var(--wb-line-soft);
	vertical-align: top;
}

.entry-content tbody tr:nth-child(even) { background: var(--wb-soft); }
.entry-content tbody tr:last-child td { border-bottom: 1px solid var(--wb-line); }

/* Any column after the first is treated as a figure column and right-aligned,
   the way a bill aligns its amounts. */
.entry-content tbody td:not(:first-child),
.entry-content thead th:not(:first-child) { text-align: right; }

.entry-content tbody td:first-child { color: var(--wb-ink); font-weight: 500; }

/* ==========================================================================
   8. TABLE OF CONTENTS (built by child theme JS)
   ========================================================================== */

.wb-toc {
	background: var(--wb-soft);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 1rem 1.25rem;
	margin: 2rem 0;
}

.wb-toc__title {
	font-family: var(--wb-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wb-muted);
	margin: 0 0 0.6rem;
	display: block;
}

.wb-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: wbtoc;
}

.wb-toc li {
	counter-increment: wbtoc;
	margin: 0;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--wb-line-soft);
	display: flex;
	gap: 0.7rem;
	font-size: 0.92rem;
	line-height: 1.5;
}

.wb-toc li:last-child { border-bottom: none; }

.wb-toc li::before {
	content: counter(wbtoc);
	font-family: var(--wb-display);
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wb-muted);
	min-width: 1.2em;
	padding-top: 0.15em;
}

.wb-toc a { text-decoration: none; color: var(--wb-body); }
.wb-toc a:hover { color: var(--wb-green); text-decoration: underline; }

.entry-content h2[id],
.entry-content h3[id] { scroll-margin-top: 80px; }

/* ==========================================================================
   9. AUTHOR BOX
   ========================================================================== */

.wb-author {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--wb-ink);
}

.wb-author__avatar { flex-shrink: 0; }
.wb-author__avatar img { border-radius: 50%; display: block; }

.wb-author__name {
	font-family: var(--wb-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wb-ink);
	margin: 0 0 0.25rem;
}

.wb-author__bio {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wb-muted);
	margin: 0;
}

.wb-author__bio a { color: var(--wb-green); }

/* ==========================================================================
   10. ARCHIVES — blog, category, tag, author, date, search
   ========================================================================== */

.separate-containers .page-header {
	padding: 1.75rem 2rem;
	margin-bottom: 1.5rem;
}

.page-header h1,
.page-header .page-title {
	font-size: 1.9rem;
	letter-spacing: -0.02em;
	margin: 0;
}

/* Eyebrow above the archive title states which index you are looking at.
   Set by functions.php, not decoration. */
.wb-archive-kind {
	display: block;
	font-family: var(--wb-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wb-green);
	margin-bottom: 0.4rem;
}

.page-header .taxonomy-description,
.page-header .author-info {
	margin-top: 0.6rem;
	font-size: 0.95rem;
	color: var(--wb-muted);
}

.wb-archive-count {
	font-size: 0.85rem;
	color: var(--wb-muted);
	font-variant-numeric: tabular-nums;
	margin-top: 0.5rem;
}

/* Archive cards */
.archive .inside-article,
.blog .inside-article,
.search .inside-article {
	padding: 1.5rem 1.75rem;
	transition: border-color 0.15s ease;
}

.archive .inside-article:hover,
.blog .inside-article:hover,
.search .inside-article:hover { border-color: var(--wb-ink); }

.archive .entry-title,
.blog .entry-title,
.search .entry-title {
	font-size: 1.35rem;
	line-height: 1.3;
	margin-bottom: 0.4rem;
}

.archive .entry-title a,
.blog .entry-title a,
.search .entry-title a {
	color: var(--wb-ink);
	text-decoration: none;
}

.archive .entry-title a:hover,
.blog .entry-title a:hover,
.search .entry-title a:hover { color: var(--wb-green); }

.archive .entry-summary p,
.blog .entry-summary p,
.search .entry-summary p {
	font-size: 0.95rem;
	color: var(--wb-muted);
	margin-bottom: 0.75rem;
}

.archive .entry-meta,
.blog .entry-meta,
.search .entry-meta {
	font-size: 0.8rem;
	color: var(--wb-muted);
}

.archive .entry-meta a,
.blog .entry-meta a,
.search .entry-meta a { color: var(--wb-muted); }

.archive .post-image img,
.blog .post-image img { border-radius: var(--wb-radius); }

/* Search form on the results page */
.search-results .wb-search-again {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-lg);
	padding: 1.25rem 1.75rem;
	margin-bottom: 1.5rem;
}

.wb-search-again .search-form { display: flex; gap: 0.5rem; }

/* Pagination */
.paging-navigation { padding: 1rem 1.5rem; }

.paging-navigation .page-numbers {
	font-family: var(--wb-display);
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.35em 0.75em;
	border-radius: var(--wb-radius);
	text-decoration: none;
	color: var(--wb-body);
}

.paging-navigation .page-numbers:hover { background: var(--wb-soft); color: var(--wb-green); }

.paging-navigation .page-numbers.current {
	background: var(--wb-ink);
	color: var(--wb-white);
}

/* ==========================================================================
   11. 404
   ========================================================================== */

.error404 .inside-article { padding: 3rem 2rem; text-align: left; }

.wb-404__code {
	font-family: var(--wb-display);
	font-variant-numeric: tabular-nums;
	font-size: clamp(3.5rem, 12vw, 6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--wb-line);
	display: block;
	margin-bottom: 0.5rem;
}

.wb-404 h1 { font-size: 1.9rem; margin: 0 0 0.75rem; }
.wb-404 p { max-width: 46ch; color: var(--wb-muted); }

.wb-404__links {
	list-style: none;
	padding: 0;
	margin: 1.75rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.6rem;
}

.wb-404__links a {
	display: block;
	padding: 0.7rem 0.9rem;
	background: var(--wb-soft);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	font-family: var(--wb-display);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wb-ink);
	text-decoration: none;
}

.wb-404__links a:hover { border-color: var(--wb-green); color: var(--wb-green); }

.wb-404 .search-form { margin-top: 1.5rem; max-width: 420px; }

/* ==========================================================================
   12. LEGAL / STATIC PAGES — narrower measure, quieter
   ========================================================================== */

.page-template-default .entry-content { max-width: 68ch; }

.page .entry-content h2 {
	font-size: 1.4rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wb-line-soft);
}

.page .entry-content h2:first-of-type { border-top: none; padding-top: 0; }

.page .entry-content h3 { font-size: 1.1rem; }

.page .entry-content hr {
	border: none;
	border-top: 1px solid var(--wb-line);
	margin: 2.5rem 0;
}

/* Legal pages get a visible last-updated line. */
.wb-page-updated {
	display: inline-block;
	font-family: var(--wb-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wb-muted);
	background: var(--wb-soft);
	border: 1px solid var(--wb-line);
	border-radius: 3px;
	padding: 0.3em 0.7em;
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   13. SIDEBAR AND FORMS
   ========================================================================== */

.sidebar .widget {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-lg);
	padding: 1.25rem 1.35rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

.sidebar .widget-title {
	font-family: var(--wb-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wb-muted);
	margin: 0 0 0.85rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wb-line);
}

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

.sidebar .widget ul li {
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--wb-line-soft);
	line-height: 1.45;
}

.sidebar .widget ul li:last-child { border-bottom: none; }

.sidebar .widget a { color: var(--wb-body); text-decoration: none; }
.sidebar .widget a:hover { color: var(--wb-green); text-decoration: underline; }

/* Ad slot placeholder — keeps layout stable before AdSense is approved. */
.wb-ad-slot {
	min-height: 250px;
	background: var(--wb-soft);
	border: 1px dashed var(--wb-line);
	border-radius: var(--wb-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #A8B0B6;
	margin-bottom: 1.5rem;
}

/* Sticky sidebar on desktop only. */
@media (min-width: 1025px) {
	.sidebar .inside-right-sidebar {
		position: sticky;
		top: 1.5rem;
	}
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 0.6rem 0.75rem;
	font-family: var(--wb-text);
	font-size: 0.95rem;
	color: var(--wb-body);
	background: var(--wb-white);
	width: 100%;
}

input:focus, textarea:focus, select:focus {
	border-color: var(--wb-green);
	box-shadow: 0 0 0 3px var(--wb-green-bg);
	outline: none;
}

button,
input[type="submit"],
.wp-block-button__link {
	font-family: var(--wb-display);
	font-size: 0.92rem;
	font-weight: 600;
	background: var(--wb-ink);
	color: var(--wb-white);
	border: none;
	border-radius: var(--wb-radius);
	padding: 0.65rem 1.3rem;
	cursor: pointer;
	transition: background 0.12s ease;
}

button:hover,
input[type="submit"]:hover { background: var(--wb-green); }

/* ==========================================================================
   14. FOOTER

   GeneratePress prints its own colour CSS after this stylesheet, so the
   footer background and link colour need the extra weight below. The
   footer markup itself comes from the generate_copyright filter in
   functions.php, because this build's Customizer strips HTML from the
   copyright field.
   ========================================================================== */

.site-footer,
.site-footer .site-info,
.site-footer .inside-site-info {
	background-color: var(--wb-ink) !important;
}

.site-footer { font-size: 0.88rem; }

.site-info .inside-site-info {
	display: block !important;
	text-align: center;
	padding: 2rem 1.5rem !important;
}

.wb-foot__links {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	line-height: 2;
}

.wb-foot__links a {
	color: #FFFFFF !important;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 3px;
	white-space: nowrap;
	padding: 0 0.1rem;
}

.wb-foot__links a:hover { text-decoration-color: #FFFFFF; }

.wb-foot__links span {
	color: #5E6B75;
	padding: 0 0.35rem;
}

.wb-foot__copy {
	margin: 0;
	font-size: 0.8rem;
	color: #8D99A3 !important;
}

/* ==========================================================================
   15. HOMEPAGE (front-page.php)
   ========================================================================== */

.wb-home { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }

.wb-home section { margin-bottom: 3rem; }

/* Hero: the thesis, stated plainly. */
.wb-hero {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-lg);
	padding: clamp(1.75rem, 5vw, 3rem);
	margin-top: 1.5rem;
}

.wb-hero h1 {
	font-size: clamp(1.85rem, 4.5vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	margin: 0 0 0.75rem;
	max-width: 20ch;
}

.wb-hero p {
	font-size: 1.05rem;
	color: var(--wb-muted);
	margin: 0;
	max-width: 58ch;
}

/* The assumption strip. Every figure on this site rests on one stated unit
   rate, so the homepage prints it up front, the way a bill prints its rate
   before its total. */
.wb-rate {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem 1.5rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--wb-ink);
}

.wb-rate__label {
	font-family: var(--wb-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wb-muted);
}

.wb-rate__value {
	font-family: var(--wb-display);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wb-amber);
	line-height: 1;
}

.wb-rate__note { font-size: 0.85rem; color: var(--wb-muted); }

/* Section headings */
.wb-sec-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--wb-ink);
}

.wb-sec-head h2 {
	font-size: 1.15rem;
	letter-spacing: 0.01em;
	margin: 0;
}

.wb-sec-head a {
	font-family: var(--wb-display);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.wb-sec-head a:hover { text-decoration: underline; }

/* Category cards */
.wb-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.85rem;
}

.wb-cat {
	display: block;
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-lg);
	padding: 1.25rem;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.wb-cat:hover {
	border-color: var(--wb-ink);
	transform: translateY(-2px);
}

.wb-cat__icon {
	width: 26px;
	height: 26px;
	color: var(--wb-green);
	margin-bottom: 0.7rem;
	display: block;
}

.wb-cat__name {
	font-family: var(--wb-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wb-ink);
	display: block;
	margin-bottom: 0.15rem;
}

.wb-cat__desc {
	font-size: 0.85rem;
	color: var(--wb-muted);
	display: block;
	line-height: 1.45;
	margin-bottom: 0.6rem;
}

.wb-cat__count {
	font-family: var(--wb-display);
	font-variant-numeric: tabular-nums;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wb-muted);
}

/* Latest articles grid */
.wb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.wb-card {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease;
}

.wb-card:hover { border-color: var(--wb-ink); }

.wb-card__thumb {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--wb-soft);
}

.wb-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.wb-card__body { padding: 1rem 1.15rem 1.15rem; }

.wb-card__cat {
	font-family: var(--wb-display);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wb-green);
	text-decoration: none;
	display: inline-block;
	margin-bottom: 0.4rem;
}

.wb-card__title {
	font-family: var(--wb-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 0.4rem;
}

.wb-card__title a { color: var(--wb-ink); text-decoration: none; }
.wb-card__title a:hover { color: var(--wb-green); }

.wb-card__date {
	font-size: 0.78rem;
	color: var(--wb-muted);
	font-variant-numeric: tabular-nums;
}

.wb-empty {
	background: var(--wb-white);
	border: 1px dashed var(--wb-line);
	border-radius: var(--wb-radius-lg);
	padding: 2rem;
	color: var(--wb-muted);
	text-align: center;
	font-size: 0.95rem;
}

/* ==========================================================================
   16. HOMEPAGE METHOD BLOCK

   The site's thesis, shown rather than described: the actual sum every
   article on the site is built from, set in tabular figures.
   ========================================================================== */

.wb-method {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius-lg);
	padding: 2.25rem 2.5rem;
}

.wb-method__intro h2 {
	font-size: 1.35rem;
	margin: 0 0 0.5rem;
	max-width: 30ch;
}

.wb-method__intro p {
	margin: 0;
	color: var(--wb-muted);
	font-size: 0.98rem;
	line-height: 1.55;
	max-width: 58ch;
}

.wb-method__sum {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.9rem 1.1rem;
	margin: 1.85rem 0;
	padding: 1.5rem 0;
	border-top: 2px solid var(--wb-ink);
	border-bottom: 1px solid var(--wb-line);
}

.wb-method__step { display: flex; flex-direction: column; gap: 0.3rem; }

.wb-method__label {
	font-family: var(--wb-display);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wb-muted);
}

.wb-method__val {
	font-family: var(--wb-display);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--wb-ink);
}

.wb-method__val small { font-size: 0.5em; font-weight: 600; margin-left: 0.1em; }

/* The answer is the only amber thing in the row. */
.wb-method__step--out .wb-method__val,
.wb-method__step--out .wb-method__label { color: var(--wb-amber); }

.wb-method__op {
	font-family: var(--wb-display);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wb-muted);
	padding-bottom: 0.35rem;
	white-space: nowrap;
}

.wb-method__foot { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.wb-method__foot a {
	font-family: var(--wb-display);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wb-ink);
	text-decoration: none;
	background: var(--wb-soft);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 0.7rem 1.1rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wb-method__foot a:hover {
	color: var(--wb-green);
	border-color: var(--wb-green);
	background: var(--wb-white);
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	body { font-size: 17px; }

	h1 { font-size: 1.85rem; }
	h2 { font-size: 1.35rem; margin-top: 2rem; }
	h3 { font-size: 1.1rem; }

	.separate-containers .inside-article,
	.archive .inside-article,
	.blog .inside-article,
	.search .inside-article { padding: 1.25rem 1.15rem; }

	.separate-containers .page-header { padding: 1.25rem 1.15rem; }

	.wb-byline { font-size: 0.8rem; gap: 0.5rem; }
	.wb-byline__updated { margin-left: 0; width: 100%; }

	.entry-content table { font-size: 0.88rem; }
	.entry-content thead th,
	.entry-content tbody td { padding: 0.55rem 0.6rem; }

	.wb-author { flex-direction: column; gap: 0.75rem; }
	.wb-cats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.65rem; }
	.wb-cat { padding: 0.95rem; }
	.wb-home section { margin-bottom: 2.25rem; }
}

@media (max-width: 640px) {
	.wb-method { padding: 1.5rem 1.25rem; }
	.wb-method__sum { gap: 0.7rem 0.8rem; }
	.wb-method__op { font-size: 0.85rem; }
}

@media print {
	.main-navigation, .sidebar, .site-footer,
	.wb-toc, .wb-ad-slot, .wb-author { display: none !important; }
	body { font-size: 11pt; background: #fff; }
	.separate-containers .inside-article { border: none; }
}