/*
Theme Name: Porkbun Blog
Theme URI: https://porkbun.com/blog
Author: Porkbun LLC
Author URI: https://porkbun.com
Description: Porkbun's house style for the blog. Wide, information-dense layouts that use the whole screen: a card grid for archives and a two-column article view with a sticky rail, so more than a few sentences land above the fold. Brand tokens are lifted straight from porkbun.com (Open Sans, pink accents, flat 1px rules, uppercase tracked labels).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary
Text Domain: porkbun-blog
Tags: blog, two-columns, custom-menu, custom-logo, featured-images, sticky-post, translation-ready, threaded-comments, right-sidebar
*/

/* ==========================================================================
   1. Brand tokens (mirrors the :root block in porkbun.com header.php)
   ========================================================================== */

:root
{
	--pb-pink: #EF7878;
	--pb-pink-hover: #DC6070;
	--pb-pink-light: #FADCDA;
	--pb-pink-medium: #ff9e9e;
	--pb-gold: #FFC100;
	--pb-danger: #EC5631;
	--pb-success: #8CC051;

	--pb-dark-gray: #222222;
	--pb-body-text: #2b2b2b;
	--pb-muted: #6f6f6f;
	--pb-light-gray: #F3F3F3;
	--pb-medium-gray: #cccccc;
	--pb-hairline: #e6e6e6;
	/* Warm zebra for table rows; a neutral grey reads cold beside the pink header. */
	--pb-zebra: #FBF6F6;
	--pb-white: #ffffff;

	--pb-blue-link: #3A81B0;
	--pb-blue-link-hover: #0f5482;

	/* Layout. --pb-measure is the article column: tune this one value to
	   trade reading comfort against line length. 700px is roughly 78
	   characters at the 17px body size. */
	--pb-shell: 1260px;
	--pb-measure: 700px;
	--pb-rail: 268px;
	--pb-gutter: 24px;

	--pb-font: "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--pb-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

	/* Type scale. Deliberately smaller than a stock WordPress theme: the
	   goal is more content per screen, not bigger letters. */
	--pb-text: 17px;
	--pb-lh: 1.68;

	--pb-header-h: 78px;
	/* Header plus the 10px pink rule, which sticks along with it. */
	--pb-header-total: 88px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html
{
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pb-header-total) + 24px);
}

body
{
	margin: 0;
	font-family: var(--pb-font);
	font-size: var(--pb-text);
	font-weight: 400;
	line-height: var(--pb-lh);
	color: var(--pb-body-text);
	background-color: var(--pb-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
iframe,
embed,
object { max-width: 100%; }

img,
svg,
video { height: auto; display: block; }

a
{
	color: var(--pb-dark-gray);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color 0.14s ease;
}

a:hover { color: var(--pb-pink-hover); }

a:focus-visible
{
	color: var(--pb-pink);
	outline: 2px solid var(--pb-pink);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0;
	color: var(--pb-dark-gray);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

p, ul, ol, dl, figure, pre, table, blockquote { margin: 0 0 1.15em 0; }

hr
{
	border: 0;
	border-top: 1px solid var(--pb-medium-gray);
	margin: 32px 0;
}

button { font-family: inherit; }

::selection
{
	background: var(--pb-pink-light);
	color: var(--pb-dark-gray);
}

.pb-screen-reader-text,
.screen-reader-text
{
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pb-skip-link:focus
{
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 2000;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 10px 16px;
	background: var(--pb-white);
	border: 1px solid var(--pb-medium-gray);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* ==========================================================================
   3. Shared primitives
   ========================================================================== */

.pb-shell
{
	width: 100%;
	max-width: var(--pb-shell);
	margin: 0 auto;
	padding: 0 var(--pb-gutter);
}

/* Uppercase tracked label with the pink accent bar. This pairing is the
   brand's main structural voice on porkbun.com. */
.pb-label
{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pb-dark-gray);
	margin: 0;
}

.pb-label--barred::after
{
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	background: var(--pb-pink);
	margin: 6px 0 12px 0;
}

.pb-eyebrow
{
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--pb-pink-hover);
}

.pb-eyebrow a
{
	color: inherit;
	text-decoration: none;
}

.pb-eyebrow a:hover
{
	color: var(--pb-dark-gray);
	text-decoration: underline;
}

.pb-meta
{
	font-size: 12.5px;
	color: var(--pb-muted);
	letter-spacing: 0.2px;
}

.pb-meta a { color: var(--pb-muted); }
.pb-meta > * + *::before
{
	content: "\00b7";
	margin: 0 7px;
	color: var(--pb-medium-gray);
}

.pb-btn
{
	display: inline-block;
	padding: 9px 22px;
	border: 1px solid var(--pb-pink);
	border-radius: 4px;
	background: var(--pb-pink);
	color: var(--pb-white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.pb-btn:hover,
.pb-btn:focus
{
	background: var(--pb-pink-hover);
	border-color: var(--pb-pink-hover);
	color: var(--pb-white);
}

.pb-btn--ghost
{
	background: var(--pb-white);
	color: var(--pb-dark-gray);
}

.pb-btn--ghost:hover,
.pb-btn--ghost:focus
{
	background: var(--pb-white);
	border-color: var(--pb-pink-hover);
	color: var(--pb-dark-gray);
}

.pb-btn--sm { padding: 6px 15px; font-size: 12px; }

/* ==========================================================================
   4. Site header
   ========================================================================== */

.pb-site-header
{
	position: sticky;
	top: 0;
	z-index: 1040;
	background: var(--pb-white);
}

.pb-header-inner
{
	display: flex;
	align-items: center;
	gap: 26px;
	height: var(--pb-header-h);
	max-width: var(--pb-shell);
	margin: 0 auto;
	padding: 0 var(--pb-gutter);
}

/* Lockup proportions follow porkbun.com: there the mark is 70px tall next to a
   30px wordmark, so the mark reads about twice the cap height of the type. The
   wordmark is regular weight, not light. */
.pb-brand
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--pb-dark-gray);
}

.pb-brand:hover { color: var(--pb-dark-gray); }
.pb-brand-mark { width: 50px; height: 50px; }
.pb-brand .custom-logo { width: auto; max-height: 52px; }

/* Baseline alignment is what puts BLOG on the wordmark's baseline instead of
   floating below it. */
.pb-brand-text
{
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.pb-brand-word
{
	font-size: 27px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
}

.pb-brand-sub
{
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--pb-pink);
	line-height: 1;
}

.pb-primary-nav { flex: 1 1 auto; min-width: 0; }

.pb-primary-nav ul
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-primary-nav li { position: relative; }

.pb-primary-nav a
{
	display: block;
	padding: 8px 11px;
	font-size: 14px;
	color: var(--pb-dark-gray);
	text-decoration: none;
	white-space: nowrap;
}

.pb-primary-nav a:hover,
.pb-primary-nav .current-menu-item > a,
.pb-primary-nav .current_page_item > a { color: var(--pb-pink-hover); }

.pb-primary-nav .current-menu-item > a,
.pb-primary-nav .current_page_item > a { font-weight: 600; }

/* One level of dropdown, enough for a blog menu. */
.pb-primary-nav .sub-menu
{
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	min-width: 210px;
	padding: 6px 0;
	background: var(--pb-white);
	border: 1px solid var(--pb-hairline);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.pb-primary-nav li:hover > .sub-menu,
.pb-primary-nav li:focus-within > .sub-menu
{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pb-primary-nav .sub-menu a { padding: 8px 16px; font-size: 13.5px; }
.pb-primary-nav .sub-menu a:hover { background: var(--pb-light-gray); }

.pb-header-actions
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: auto;
}

.pb-header-search
{
	display: flex;
	align-items: center;
	width: 168px;
	border: 1px solid var(--pb-medium-gray);
	border-radius: 4px;
	background: var(--pb-white);
	transition: border-color 0.14s ease, width 0.18s ease;
}

.pb-header-search:focus-within
{
	border-color: var(--pb-pink);
	width: 218px;
}

.pb-header-search input[type="search"]
{
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 0 7px 11px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--pb-dark-gray);
}

.pb-header-search input[type="search"]:focus { outline: none; }

.pb-header-search button
{
	padding: 6px 10px;
	border: 0;
	background: transparent;
	color: var(--pb-muted);
	cursor: pointer;
	line-height: 1;
}

.pb-header-search button:hover { color: var(--pb-pink); }

.pb-nav-toggle
{
	display: none;
	width: 40px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--pb-medium-gray);
	border-radius: 4px;
	background: var(--pb-white);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pb-nav-toggle span
{
	display: block;
	width: 18px;
	height: 2px;
	margin: 3px auto;
	background: var(--pb-dark-gray);
}

/* The 10px pink rule under the header is a porkbun.com signature. */
.pb-header-rule
{
	height: 10px;
	background: var(--pb-pink);
}

/* Reading progress, painted into the lower half of the pink rule on single
   posts so it costs no vertical space of its own. */
.pb-progress
{
	position: fixed;
	top: calc(var(--pb-header-h) + 6px);
	left: 0;
	z-index: 1050;
	width: 100%;
	height: 4px;
	background: transparent;
	pointer-events: none;
}

body.admin-bar .pb-progress { top: calc(var(--pb-header-h) + 38px); }
@media screen and (max-width: 782px)
{
	body.admin-bar .pb-progress { top: calc(var(--pb-header-h) + 52px); }
}

.pb-progress span
{
	display: block;
	height: 100%;
	width: 0;
	background: var(--pb-dark-gray);
	transform-origin: left center;
}

/* ==========================================================================
   5. Mobile nav drawer
   ========================================================================== */

.pb-nav-backdrop
{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1049;
	background: rgba(0, 0, 0, 0.45);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pb-nav-backdrop.is-open
{
	display: block;
	animation: pbFadeIn 0.18s ease forwards;
}

@keyframes pbFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Drawer chrome exists in the markup at all widths, shown only on mobile. */
.pb-drawer-head,
.pb-drawer-search { display: none; }

/* ==========================================================================
   6. Archive: intro, category chips, lead post, card grid
   ========================================================================== */

.pb-archive-head
{
	padding: 30px 0 18px 0;
	border-bottom: 1px solid var(--pb-medium-gray);
}

.pb-archive-head h1
{
	font-size: 28px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.pb-archive-head .pb-archive-blurb
{
	max-width: 62ch;
	margin: 9px 0 0 0;
	font-size: 15px;
	color: var(--pb-muted);
}

/* Chips replace a sidebar: browsing lives on one horizontal strip so the
   grid below keeps the full width. */
.pb-chips
{
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 16px 0 22px 0;
	list-style: none;
}

.pb-chips li { margin: 0; }

.pb-chip
{
	display: inline-block;
	padding: 5px 13px;
	border: 1px solid var(--pb-medium-gray);
	border-radius: 100px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--pb-dark-gray);
	text-decoration: none;
	white-space: nowrap;
}

.pb-chip:hover
{
	border-color: var(--pb-pink);
	color: var(--pb-dark-gray);
}

.pb-chip.is-active
{
	background: var(--pb-dark-gray);
	border-color: var(--pb-dark-gray);
	color: var(--pb-white);
}

.pb-chip-count
{
	margin-left: 5px;
	font-weight: 400;
	color: var(--pb-muted);
}

.pb-chip.is-active .pb-chip-count { color: var(--pb-pink-medium); }

/* --- Lead post: the newest post gets a wide two-up row --- */

.pb-lead
{
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 30px;
	align-items: center;
	padding: 6px 0 28px 0;
	border-bottom: 1px solid var(--pb-medium-gray);
	margin-bottom: 30px;
}

.pb-lead-thumb
{
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--pb-light-gray);
	aspect-ratio: 16 / 9;
}

.pb-lead-thumb img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.pb-lead:hover .pb-lead-thumb img { transform: scale(1.025); }

.pb-lead-body { min-width: 0; }

.pb-lead-body h2
{
	margin: 9px 0 10px 0;
	font-size: 30px;
	line-height: 1.2;
}

.pb-lead-body h2 a { text-decoration: none; }
.pb-lead-body h2 a:hover { color: var(--pb-pink-hover); }

.pb-lead-body .pb-excerpt
{
	margin: 0 0 14px 0;
	font-size: 15.5px;
	color: #444;
}

.pb-lead-flag
{
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 9px;
	background: var(--pb-pink-light);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--pb-dark-gray);
}

/* --- Card grid --- */

.pb-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
	gap: 34px 30px;
	margin: 0 0 40px 0;
	padding: 0;
	list-style: none;
}

.pb-card
{
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

.pb-card-thumb
{
	display: block;
	overflow: hidden;
	background: var(--pb-light-gray);
	aspect-ratio: 16 / 9;
	margin-bottom: 12px;
}

.pb-card-thumb img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.pb-card:hover .pb-card-thumb img { transform: scale(1.035); }

/* Posts with no featured image get a branded placeholder rather than a hole.
   The size rules have to out-specify the object-fit: cover above, or the mark
   gets stretched to fill the whole tile. */
.pb-card-thumb--empty,
.pb-lead-thumb--empty
{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pb-pink-light);
}

.pb-card-thumb--empty img,
.pb-lead-thumb--empty img
{
	width: 56px;
	height: 56px;
	object-fit: contain;
	opacity: 0.8;
}

.pb-lead-thumb--empty img
{
	width: 84px;
	height: 84px;
}

/* No zoom on the placeholder, there is nothing to zoom into. */
.pb-card:hover .pb-card-thumb--empty img,
.pb-lead:hover .pb-lead-thumb--empty img { transform: none; }

.pb-card h2
{
	margin: 7px 0 8px 0;
	font-size: 18.5px;
	line-height: 1.32;
}

.pb-card h2 a { text-decoration: none; }
.pb-card h2 a:hover { color: var(--pb-pink-hover); }

.pb-card .pb-excerpt
{
	margin: 0 0 10px 0;
	font-size: 14.5px;
	line-height: 1.58;
	color: #4a4a4a;
}

.pb-card .pb-meta { margin-top: auto; }

/* Compact list rows, used for search results and the rail. */
.pb-rows
{
	margin: 0 0 36px 0;
	padding: 0;
	list-style: none;
}

.pb-row
{
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 18px;
	padding: 16px 0;
	border-bottom: 1px solid var(--pb-hairline);
}

.pb-row:first-child { border-top: 1px solid var(--pb-hairline); }

.pb-row-thumb
{
	display: block;
	overflow: hidden;
	background: var(--pb-light-gray);
	aspect-ratio: 4 / 3;
}

.pb-row-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pb-row h2
{
	margin: 2px 0 5px 0;
	font-size: 17px;
	line-height: 1.34;
}

.pb-row h2 a { text-decoration: none; }
.pb-row h2 a:hover { color: var(--pb-pink-hover); }

.pb-row .pb-excerpt
{
	margin: 0 0 6px 0;
	font-size: 14px;
	line-height: 1.55;
	color: #4a4a4a;
}

/* ==========================================================================
   7. Pagination
   ========================================================================== */

.pb-pagination
{
	padding: 8px 0 56px 0;
	border-top: 1px solid var(--pb-medium-gray);
}

.pb-pagination .nav-links
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding-top: 22px;
}

.pb-pagination .page-numbers
{
	display: inline-block;
	min-width: 36px;
	padding: 7px 11px;
	border: 1px solid var(--pb-medium-gray);
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--pb-dark-gray);
}

.pb-pagination .page-numbers:hover { border-color: var(--pb-pink); }

.pb-pagination .page-numbers.current
{
	background: var(--pb-dark-gray);
	border-color: var(--pb-dark-gray);
	color: var(--pb-white);
}

.pb-pagination .page-numbers.dots
{
	border-color: transparent;
	color: var(--pb-muted);
	min-width: 0;
	padding: 7px 2px;
}

.pb-pagination .prev,
.pb-pagination .next
{
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-size: 12px;
}

/* ==========================================================================
   8. Single post
   ========================================================================== */

.pb-article-head
{
	padding: 26px 0 18px 0;
	max-width: 26em;
}

.pb-article-head h1
{
	margin: 8px 0 10px 0;
	font-size: 33px;
	line-height: 1.18;
	letter-spacing: -0.2px;
}

.pb-article-head .pb-meta { font-size: 13px; }

.pb-breadcrumb
{
	padding-top: 20px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pb-muted);
}

.pb-breadcrumb a { color: var(--pb-muted); text-decoration: none; }
.pb-breadcrumb a:hover { color: var(--pb-pink-hover); text-decoration: underline; }
.pb-breadcrumb span + span::before { content: "/"; margin: 0 7px; color: var(--pb-medium-gray); }

/* Slim hero. Capped height on purpose: a full-bleed image would push the
   first paragraph off the screen, which is the thing this theme fixes.

   It lives inside the article column, so the box is 700x260 at full measure.
   That is 2.69:1, which is exactly the ratio of the registered pb-hero size
   (1400x520), so object-fit has nothing left to crop. Keep the two in step: if
   add_image_size( 'pb-hero', ... ) changes, this cap has to change with it, or
   the double crop comes straight back. */
.pb-hero
{
	overflow: hidden;
	background: var(--pb-light-gray);
	margin-bottom: 30px;
	max-height: 260px;
}

/* Static pages have no rail, so the column is not already the measure. */
.pb-hero--measure { max-width: var(--pb-measure); }

.pb-hero img
{
	width: 100%;
	max-height: 260px;
	object-fit: cover;
}

.pb-hero figcaption
{
	padding: 7px 2px 0 2px;
	font-size: 12.5px;
	color: var(--pb-muted);
}

/* Article body and rail. The rail is what turns dead margin into use. */
.pb-article-grid
{
	display: grid;
	grid-template-columns: minmax(0, var(--pb-measure)) var(--pb-rail);
	gap: 54px;
	align-items: start;
	justify-content: start;
	padding-bottom: 20px;
}

.pb-article-body { min-width: 0; }

/* Pages have no rail, so the measure is applied directly. */
.pb-page-body
{
	max-width: var(--pb-measure);
	padding-bottom: 50px;
}

.pb-rail
{
	position: sticky;
	top: calc(var(--pb-header-total) + 24px);
	min-width: 0;
	font-size: 14px;
}

.pb-rail-block
{
	padding: 0 0 20px 0;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--pb-hairline);
}

.pb-rail-block:last-child { border-bottom: 0; margin-bottom: 0; }

.pb-rail-block ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-rail-block li { margin-bottom: 9px; line-height: 1.45; }
.pb-rail-block li:last-child { margin-bottom: 0; }
.pb-rail-block a { text-decoration: none; }
.pb-rail-block a:hover { text-decoration: underline; }

/* Table of contents, generated from the headings by theme.js. */
.pb-toc { display: none; }
.pb-toc.is-ready { display: block; }

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

.pb-toc li { margin: 0; }

.pb-toc a
{
	display: block;
	padding: 5px 0 5px 12px;
	border-left: 2px solid var(--pb-hairline);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--pb-muted);
	text-decoration: none;
}

.pb-toc a:hover
{
	border-left-color: var(--pb-pink-medium);
	color: var(--pb-dark-gray);
	text-decoration: none;
}

.pb-toc .is-current > a
{
	border-left-color: var(--pb-pink);
	color: var(--pb-dark-gray);
	font-weight: 600;
}

.pb-toc .pb-toc-h3 a { padding-left: 24px; font-size: 12.5px; }

.pb-share
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pb-share a
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--pb-medium-gray);
	border-radius: 4px;
	color: var(--pb-dark-gray);
	text-decoration: none;
}

.pb-share a:hover
{
	border-color: var(--pb-pink);
	color: var(--pb-pink-hover);
}

.pb-share svg { width: 15px; height: 15px; fill: currentColor; }

/* Rail promo, the one place with a color field. */
.pb-rail-promo
{
	padding: 18px;
	background: var(--pb-pink-light);
	border-radius: 6px;
}

.pb-rail-promo p
{
	margin: 0 0 12px 0;
	font-size: 13.5px;
	line-height: 1.5;
}

.pb-rail-promo .pb-label--barred::after { margin-bottom: 10px; }

/* ==========================================================================
   9. Prose (post and page content)
   ========================================================================== */

.pb-prose { font-size: var(--pb-text); }

.pb-prose > *:first-child { margin-top: 0; }

.pb-prose p { margin: 0 0 1.15em 0; }

/* Lead paragraph: slightly larger, so the opening reads as an intro without
   costing a whole screen of height. */
.pb-prose > p:first-of-type
{
	font-size: 18.5px;
	line-height: 1.6;
	color: #333;
}

.pb-prose h2
{
	margin: 1.9em 0 0.6em 0;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.pb-prose h2::before
{
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	background: var(--pb-pink);
	margin-bottom: 12px;
}

/* The ladder has to be legible at a glance, because a long article is read by
   scanning. Each level differs in size AND treatment, not just size:

     h2   21px  uppercase, tracked, pink bar above     part
     h3   19px  sentence case, rule above              section
     h4   13.5px uppercase, tracked                    label

   Before this, h3 was 17px sentence case, the same size as body text, while
   h4 was 15.5px uppercase and tracked. The subordinate level was reading as
   the more structural one. */
.pb-prose h3
{
	margin: 2.6em 0 0.7em 0;
	padding-top: 1.4em;
	border-top: 1px solid var(--pb-medium-gray);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.1px;
	line-height: 1.3;
}

/* An h3 straight after an h2 already has the pink bar and the heading above
   it, so the rule would be a second divider in the same breath. */
.pb-prose h2 + h3
{
	margin-top: 1.2em;
	padding-top: 0;
	border-top: 0;
}

/* Sentence case, not uppercase. These headings have to lead with the
   correction, so they run 75 to 80 characters, and uppercase with tracking
   sets about 30% wider than sentence case. Four of eighteen were wrapping
   onto a second line, and uppercase is a label treatment anyway: it works on
   two or three words, not on a sentence. Weight plus the 2em above it is
   enough separation from body copy; an accent mark here read as a stray
   dash rather than a heading cue. */
.pb-prose h4
{
	margin: 2em 0 0.5em 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--pb-dark-gray);
}


.pb-prose ul,
.pb-prose ol { padding-left: 22px; }
.pb-prose li { margin-bottom: 0.42em; }
.pb-prose li > ul,
.pb-prose li > ol { margin-top: 0.42em; margin-bottom: 0; }

.pb-prose ul li::marker { color: var(--pb-pink); }

.pb-prose a
{
	color: var(--pb-dark-gray);
	text-decoration: underline;
	text-decoration-color: var(--pb-pink-medium);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.pb-prose a:hover
{
	color: var(--pb-pink-hover);
	text-decoration-color: var(--pb-pink-hover);
}

.pb-prose blockquote
{
	margin: 1.6em 0;
	padding: 2px 0 2px 20px;
	border-left: 3px solid var(--pb-pink);
	font-size: 18px;
	line-height: 1.55;
	color: #333;
}

.pb-prose blockquote p:last-child { margin-bottom: 0; }
.pb-prose blockquote cite
{
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-style: normal;
	color: var(--pb-muted);
}

.pb-prose figure { margin: 1.7em 0; }

.pb-prose figcaption,
.pb-prose .wp-caption-text
{
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--pb-muted);
}

.pb-prose code
{
	padding: 2px 5px;
	background: var(--pb-light-gray);
	border-radius: 3px;
	font-family: var(--pb-font-mono);
	font-size: 0.875em;
}

.pb-prose pre
{
	padding: 15px 17px;
	overflow-x: auto;
	background: var(--pb-light-gray);
	border-left: 3px solid var(--pb-medium-gray);
	font-family: var(--pb-font-mono);
	font-size: 13.5px;
	line-height: 1.55;
}

.pb-prose pre code { padding: 0; background: none; }

.pb-prose table
{
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

/* Symmetric padding, because the cells now carry backgrounds. The old
   "9px 12px 9px 0" left the text flush to the cell edge, which was fine on
   white and looks broken on a tint. */
.pb-prose th,
.pb-prose td
{
	padding: 11px 14px;
	border-bottom: 1px solid var(--pb-hairline);
	text-align: left;
	vertical-align: top;
}

/* Header: a pink tint under a solid pink rule. Solid --pb-pink behind the
   header was the other option and it passes contrast with dark text at
   5.78:1, but a full pink band fights the house rule that pink is an accent
   rather than a surface. White on --pb-pink is 2.75:1 and never an option. */
.pb-prose thead th
{
	background: var(--pb-pink-light);
	border-bottom: 2px solid var(--pb-pink);
	color: var(--pb-dark-gray);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Row headers in the first column, where a table uses them. */
.pb-prose tbody th
{
	font-weight: 700;
	color: var(--pb-dark-gray);
}

.pb-prose tbody tr:nth-child(even) { background: var(--pb-zebra); }

/* The last row keeps a rule so the table closes cleanly against the prose. */
.pb-prose tbody tr:last-child td,
.pb-prose tbody tr:last-child th { border-bottom: 1px solid var(--pb-medium-gray); }

.pb-prose .wp-block-table { overflow-x: auto; }

.pb-prose hr
{
	margin: 2.2em 0;
	border-top: 1px solid var(--pb-medium-gray);
}

/* Figures read as objects on the page rather than as content that happens to
   be pictorial.

   The frame lives on the FIGURE, never on the img. Core's lightbox measures
   the img's own box to compute its zoom, and anything that changes that box
   throws the arithmetic off: padding on the img made the enlarged view
   overscale and clip its own edges. Leave the img geometrically plain. */
.pb-prose .wp-block-image
{
	border: 1px solid var(--pb-hairline);
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	background: var(--pb-white);
	overflow: hidden;
}

.pb-prose .wp-block-image img { border-radius: 0; }

/* Screenshots are captured tight to the element they framed, so their content
   runs to the pixel edge and would sit against the frame. The mat is padding
   on the figure, and it is scoped to screenshots: a photograph wants to fill
   its frame, not float in one. */
.pb-prose .pb-shot,
.pb-prose .pb-rebuttal-sheet,
.pb-prose .pb-lcp-image
{
	padding: 18px 18px 0 18px;
}

/* Caption sits inside the frame, separated rather than crowded. */
.pb-prose .wp-block-image figcaption
{
	margin: 0;
	padding: 11px 16px 13px 16px;
	border-top: 1px solid var(--pb-hairline);
	background: #fcfbfb;
}

.pb-prose .pb-shot figcaption,
.pb-prose .pb-rebuttal-sheet figcaption,
.pb-prose .pb-lcp-image figcaption { margin: 18px -18px 0 -18px; }

/* The in-post featured banner is full-bleed by design and already sits in a
   grey well, so it keeps its square edges. */
.pb-hero img
{
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Wide and full blocks are allowed to break the measure, but only into space
   that actually exists.

   The bleed used to be a flat -60px each side, which overflows in two ways.
   Left: the shell only has a 24px gutter until the viewport passes 1332px, so
   anywhere from about 980px to 1332px a wide block pushed past the viewport
   edge and put a horizontal scrollbar on the page. Right: the gap between the
   article column and the sticky rail is 54px, so a 60px bleed laid 6px of the
   block over the rail.

   min() caps the bleed at 40px, which stays inside the 54px gap. max() lets it
   grow into whatever centring margin the shell has left over once the viewport
   is wider than --pb-shell. Below that the bleed settles at 16px, which uses
   most of the gutter without touching the screen edge. */
.pb-prose .alignwide,
.pb-prose .alignfull
{
	--pb-bleed: min(40px, max(0px, (100vw - var(--pb-shell)) / 2) + 16px);

	width: calc(100% + (2 * var(--pb-bleed)));
	max-width: none;
	margin-left: calc(-1 * var(--pb-bleed));
}

.pb-prose .alignleft
{
	float: left;
	margin: 4px 24px 16px 0;
	max-width: 46%;
}

.pb-prose .alignright
{
	float: right;
	margin: 4px 0 16px 24px;
	max-width: 46%;
}

.pb-prose .aligncenter
{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.pb-prose .wp-block-image img { margin: 0 auto; }

.pb-prose .wp-block-button__link
{
	display: inline-block;
	padding: 9px 22px;
	border-radius: 4px;
	background: var(--pb-pink);
	color: var(--pb-white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
}

.pb-prose .wp-block-button__link:hover { background: var(--pb-pink-hover); color: var(--pb-white); }

.pb-prose .wp-block-embed iframe,
.pb-prose iframe { max-width: 100%; }

.pb-prose .wp-block-separator
{
	border-top: 1px solid var(--pb-medium-gray);
	max-width: 100%;
}

/* Footnote-ish page-break links from <!--nextpage--> */
.pb-page-links
{
	margin: 30px 0 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.pb-page-links a,
.pb-page-links > span
{
	display: inline-block;
	min-width: 30px;
	margin-right: 5px;
	padding: 5px 9px;
	border: 1px solid var(--pb-medium-gray);
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
}

/* ==========================================================================
   9b. Rebuttal hero (patterns/rebuttal-hero.php)
   ==========================================================================

   Decouples source order from visual order. The takeaways come first in the
   markup and stay there, because that block is the extraction target for
   search and for LLM retrieval. The graphic sits beside it on a wide screen so
   it lands in the first viewport.

   Placement is explicit grid-column / grid-row on both children rather than
   flex order, so the layout is declarative: every cell says where it goes, at
   every breakpoint, and nothing depends on DOM sequence.

   One copy of each block. No display:none, no off-screen text, no separate
   mobile markup.

   Breakpoint note: two columns start at 1024px rather than 900px. Below 980px
   this theme has already stacked the rail under the article, and the band from
   900 to 980 leaves the figure about 300px, which is narrower than the crop can
   survive. To move it, change the one min-width below.

   Width note: .pb-rebuttal-hero carries alignwide, so the row is the measure
   plus the bounded bleed above: about 686px at 1024, 752px at 1280 and 780px at
   1440. The figure column is a little over half of that, so the crop is being
   asked to stay readable at roughly 340px at the narrow end and 400px at the
   wide end. That number, not the source resolution, is what the crop has to be
   chosen against. */

.pb-prose .pb-rebuttal-hero
{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 26px;
	align-items: start;

	/* Left edge stays flush with the article text. This block used to carry
	   alignwide, which bleeds both ways and put the takeaways heading 16 to
	   40px left of every paragraph around it, and only 8px from the viewport
	   edge between 760 and 1100. Extra width now comes from the right only,
	   in the rule below, so nothing ever sits outside the measure on the
	   reading side. */
	width: 100%;
	max-width: none;
	margin-left: 0;

	/* Block-direction only. The margin shorthand would reset margin-left to 0
	   and clobber the negative bleed that .alignwide sets a few rules earlier,
	   which grows the block by 80px and sends all of it rightward into the
	   sticky rail. */
	margin-top: 2.4em;
	margin-bottom: 2.4em;
}

/* A classic theme gets the legacy group markup back.
   wp_restore_group_inner_container() in wp-includes/block-supports/layout.php
   returns early when wp_theme_has_theme_json() is true, and this theme has no
   theme.json, so core rewraps every group's children in a
   .wp-block-group__inner-container div. That makes the takeaways and the figure
   grandchildren of the grid rather than children of it, and the grid quietly
   stops placing anything.

   display: contents takes the injected wrapper out of the layout so its
   children become the grid items. It is written to survive either markup: with
   no wrapper present the rule matches nothing and the grid already works. */
.pb-prose .pb-rebuttal-hero > .wp-block-group__inner-container { display: contents; }

/* Core's flow layout adds a block margin to every child. Inside a grid that
   fights the gap, so the gap is the only spacing authority here. */
.pb-prose .pb-rebuttal-hero > *
{
	margin-block-start: 0;
	margin-block-end: 0;
	min-width: 0;
}

/* Mobile and tablet: one column, stacked in source order. */
.pb-prose .pb-rebuttal-hero__takeaways { grid-column: 1; grid-row: 1; }
.pb-prose .pb-rebuttal-hero__figure { grid-column: 1; grid-row: 2; }

/* Reach through the injected .wp-block-group__inner-container, not just past
   it. display: contents takes that div out of the layout but it is still the
   DOM first child, so "> *:first-child" was zeroing the margin on the wrapper
   and leaving the h2's own 40px margin-top intact. The result was the
   takeaways column starting 40px below the figure beside it. */
.pb-prose .pb-rebuttal-hero__takeaways > *:first-child,
.pb-prose .pb-rebuttal-hero__takeaways > * > *:first-child { margin-top: 0; }

.pb-prose .pb-rebuttal-hero__takeaways > *:last-child,
.pb-prose .pb-rebuttal-hero__takeaways > * > *:last-child { margin-bottom: 0; }

/* Inherit the article's list rhythm rather than inventing one. An earlier
   version set line-height 1.55 and a 20px indent here, against the 1.68 and
   22px everything else uses, so the block read tighter than the page around
   it. Only the outer margins are overridden, because the grid gap owns the
   spacing between the two columns. */
.pb-prose .pb-rebuttal-hero__takeaways ul { margin: 0; }

.pb-prose .pb-rebuttal-hero__takeaways li:last-child { margin-bottom: 0; }

/* The footnote annotates the list, so it sits closer to it than a new
   paragraph would, but not flush against the last bullet. */
.pb-prose .pb-takeaway-note
{
	margin-top: 1em;
	margin-bottom: 0;
	font-size: 14px;
	color: var(--pb-muted);
}

/* The figure is the hero crop. The margin reset undoes .pb-prose figure. */
.pb-prose .pb-rebuttal-hero__figure figure { margin: 0; }

.pb-prose .pb-rebuttal-hero__figure img
{
	display: block;
	width: 100%;
	height: auto;
}

.pb-prose .pb-rebuttal-hero__figure a
{
	display: block;
	text-decoration: none;
}

.pb-prose .pb-rebuttal-hero__figure figcaption { margin-top: 8px; }

/* Optional modifier: invert the stack on small screens so the graphic leads.
   Source order does not change, only placement.

   Two reasons this is off by default and needs a decision rather than a
   default. It widens the gap between source order and rendered order, which is
   the thing to keep small. And it puts a focusable link (the crop links to the
   full sheet) visually above content that still precedes it in focus order,
   which is a WCAG 2.4.3 problem, not only an SEO one. */
.pb-prose .pb-rebuttal-hero--figure-first .pb-rebuttal-hero__takeaways { grid-row: 2; }
.pb-prose .pb-rebuttal-hero--figure-first .pb-rebuttal-hero__figure { grid-row: 1; }

/* Two columns are OPT-IN, via pb-rebuttal-hero--split on the wrapper group.
   Stacked is the default because the split turned out to cost more than it
   bought: it renders the graphic at roughly half the width, which on a
   screenshot of handwritten annotations means nobody can read the thing it
   exists to show, and it leaves several hundred pixels of empty column beside
   a tall takeaways list. Measured on the GoDaddy rebuttal post at 1280px: the
   figure went from 752px wide stacked to 378px split, and 530px of the right
   column was empty.

   Source order is takeaways then figure either way, which is the part that
   actually mattered. The split was only ever the mechanism for getting the
   graphic into the first viewport, and it is still here for a post whose art
   is wide enough to survive it. */
@media (min-width: 1024px)
{
	/* Reach 40px into the 54px gutter between the article and the rail. Safe
	   at every width from here up: with the rail present that gap always
	   exists, and below 980 where the rail stacks the container is wider than
	   the measure by more than this. */
	.pb-prose .pb-rebuttal-hero { width: calc(100% + 40px); }

	.pb-prose .pb-rebuttal-hero--split
	{
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: 32px;
	}

	.pb-prose .pb-rebuttal-hero--split .pb-rebuttal-hero__takeaways,
	.pb-prose .pb-rebuttal-hero--split.pb-rebuttal-hero--figure-first .pb-rebuttal-hero__takeaways
	{
		grid-column: 1;
		grid-row: 1;
	}

	.pb-prose .pb-rebuttal-hero--split .pb-rebuttal-hero__figure,
	.pb-prose .pb-rebuttal-hero--split.pb-rebuttal-hero--figure-first .pb-rebuttal-hero__figure
	{
		grid-column: 2;
		grid-row: 1;
	}
}

/* The full annotated sheet, in the body. Tall portrait art, so it is capped by
   viewport height rather than width: at full measure an unbounded portrait
   screenshot is several screens long. The lightbox is how it gets read at
   original resolution. */
.pb-prose .pb-rebuttal-sheet img
{
	max-height: 82vh;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	border: 1px solid var(--pb-hairline);
}

.pb-prose .pb-rebuttal-sheet { text-align: center; }
.pb-prose .pb-rebuttal-sheet figcaption { text-align: left; }

/* Core's image lightbox takes its backdrop colour from the theme's global
   background. A classic theme has no theme.json for it to read, so that
   resolves to #fff and the lightbox opens on a white field instead of dimming
   the page.

   The colour lands on a .scrim div that core paints over the overlay, not on
   the overlay itself, so both need setting. Both are inline styles, hence the
   !important; short of shipping a theme.json there is no other hook.

   object-fit: cover is also written inline onto the enlarged img. That is
   what core wants mid-animation, but at rest it crops the image to fill its
   box, which clips a tall document like the annotated chart. */
.wp-lightbox-overlay { background-color: rgba(34, 34, 34, 0.92) !important; }

.wp-lightbox-overlay .scrim { background-color: rgba(34, 34, 34, 0.92) !important; }

.wp-lightbox-overlay.active img { object-fit: contain !important; }

.wp-lightbox-overlay .wp-lightbox-close-button { color: var(--pb-white); }

.wp-lightbox-overlay .wp-lightbox-close-button:not(:hover):not(:active):not(.has-background)
{
	background-color: rgba(255, 255, 255, 0.16);
}

/* The screenshots are white documents, so on a dark scrim they want an edge
   rather than a mat. */
.wp-lightbox-overlay img
{
	border-radius: 4px;
	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   10. Post footer: tags, author, prev/next, related
   ========================================================================== */

.pb-article-foot
{
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--pb-medium-gray);
}

.pb-tags
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0 0 26px 0;
	padding: 0;
	list-style: none;
}

.pb-tags .pb-label { margin-right: 5px; }

.pb-adjacent
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.pb-adjacent a
{
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--pb-hairline);
	border-radius: 4px;
	text-decoration: none;
}

.pb-adjacent a:hover { border-color: var(--pb-pink); }
.pb-adjacent .pb-label { color: var(--pb-muted); }
.pb-adjacent strong
{
	display: block;
	margin-top: 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pb-dark-gray);
}

.pb-adjacent--next { text-align: right; }

.pb-related
{
	padding: 34px 0 50px 0;
	border-top: 1px solid var(--pb-medium-gray);
}

.pb-related > .pb-label { margin-bottom: 20px; }
.pb-related .pb-grid { margin-bottom: 0; }

/* ==========================================================================
   11. Comments
   ========================================================================== */

.pb-comments
{
	max-width: var(--pb-measure);
	padding: 30px 0 50px 0;
	border-top: 1px solid var(--pb-medium-gray);
}

.pb-comments .comment-list
{
	margin: 22px 0 0 0;
	padding: 0;
	list-style: none;
}

.pb-comments .comment-list ol.children
{
	margin: 16px 0 0 24px;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--pb-hairline);
	padding-left: 20px;
}

.pb-comments article.comment-body
{
	padding: 16px 0;
	border-bottom: 1px solid var(--pb-hairline);
}

.pb-comments .comment-author
{
	font-size: 14px;
	font-weight: 600;
}

.pb-comments .comment-author img
{
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
	border-radius: 50%;
}

.pb-comments .comment-metadata
{
	margin-bottom: 8px;
	font-size: 12px;
	color: var(--pb-muted);
}

.pb-comments .comment-metadata a { color: var(--pb-muted); }

.pb-comments .comment-content { font-size: 15.5px; }

.pb-comments .reply
{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.pb-comments input[type="text"],
.pb-comments input[type="email"],
.pb-comments input[type="url"],
.pb-comments textarea,
.pb-search-page input[type="search"],
.widget input[type="search"],
.widget input[type="text"]
{
	width: 100%;
	max-width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--pb-medium-gray);
	border-radius: 4px;
	font-family: inherit;
	font-size: 15px;
	color: var(--pb-dark-gray);
	background: var(--pb-white);
}

.pb-comments input:focus,
.pb-comments textarea:focus
{
	border-color: var(--pb-pink);
	outline: none;
}

.pb-comments .comment-form label
{
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.pb-comments .comment-form p { margin-bottom: 16px; }

.pb-comments .form-submit input[type="submit"]
{
	padding: 10px 24px;
	border: 1px solid var(--pb-pink);
	border-radius: 4px;
	background: var(--pb-pink);
	color: var(--pb-white);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	cursor: pointer;
}

.pb-comments .form-submit input[type="submit"]:hover
{
	background: var(--pb-pink-hover);
	border-color: var(--pb-pink-hover);
}

/* ==========================================================================
   12. Search results page, 404, no results
   ========================================================================== */

.pb-search-page
{
	max-width: 560px;
	margin: 0 0 30px 0;
	display: flex;
	gap: 8px;
}

.pb-search-page .pb-btn { flex: 0 0 auto; }

.pb-empty
{
	max-width: 60ch;
	padding: 20px 0 60px 0;
}

.pb-empty h1
{
	font-size: 26px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.pb-empty p { color: #444; }

/* ==========================================================================
   13. Widgets (optional rail area)
   ========================================================================== */

.widget { margin-bottom: 22px; }

.widget .widget-title,
.widget h2
{
	margin: 0 0 10px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pb-dark-gray);
}

.widget ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.widget li { margin-bottom: 8px; line-height: 1.45; }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; }

/* ==========================================================================
   14. Site footer (mirrors the dark porkbun.com footer)
   ========================================================================== */

.pb-site-footer
{
	background: var(--pb-dark-gray);
	color: var(--pb-white);
	padding: 54px 0 40px 0;
	font-size: 13px;
}

/* Two blocks, matching porkbun.com's col-md-5 plus col-md-6 split: the about
   column on the left, three link columns on the right. */
.pb-footer-grid
{
	display: grid;
	grid-template-columns: minmax(300px, 1fr) minmax(0, 1.25fr);
	gap: 40px;
}

.pb-footer-links
{
	display: grid;
	grid-template-columns: repeat(3, minmax(130px, 1fr));
	gap: 30px;
	margin-top: 8px;
}

.pb-footer-links .pb-label { margin-top: 22px; }
.pb-footer-links .pb-footer-col > .pb-label:first-child { margin-top: 0; }

.pb-footer-brand
{
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 26px;
	font-weight: 300;
	margin-bottom: 12px;
}

.pb-footer-brand img { width: 46px; height: 46px; }

.pb-site-footer .pb-footer-blurb
{
	color: var(--pb-medium-gray);
	font-size: 12.5px;
	line-height: 1.6;
	max-width: 42ch;
}

.pb-site-footer .pb-label
{
	color: var(--pb-white);
	margin-bottom: 12px;
}

.pb-site-footer .pb-label::after { background: var(--pb-pink); }

.pb-footer-col ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-footer-col li { margin-bottom: 7px; line-height: 1.4; }

.pb-site-footer a
{
	color: var(--pb-white);
	text-decoration: none;
}

.pb-site-footer a:hover
{
	color: var(--pb-pink-medium);
	text-decoration: underline;
}

/* --- Newsletter signup --- */

.pb-newsletter { margin: 20px 0 4px 0; }

.pb-newsletter h4
{
	margin: 0 0 5px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--pb-white);
}

.pb-newsletter p
{
	margin: 0 0 10px 0;
	font-size: 12.5px;
	color: var(--pb-medium-gray);
}

.pb-newsletter-row
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pb-newsletter input[type="email"]
{
	flex: 1 1 180px;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--pb-medium-gray);
	border-radius: 4px;
	background: var(--pb-white);
	font-family: inherit;
	font-size: 14px;
	color: var(--pb-dark-gray);
}

.pb-newsletter input[type="email"]:focus
{
	border-color: var(--pb-pink);
	outline: none;
}

.pb-newsletter input[type="submit"]
{
	flex: 0 0 auto;
	padding: 9px 24px;
	font-family: inherit;
	cursor: pointer;
}

.pb-honeypot
{
	position: absolute;
	left: -5000px;
}

/* --- Contact block --- */

.pb-contact
{
	margin: 22px 0 0 0;
	padding: 0;
	list-style: none;
	color: var(--pb-medium-gray);
	font-size: 12.5px;
}

.pb-contact li
{
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin-bottom: 13px;
	line-height: 1.5;
}

.pb-contact svg
{
	width: 14px;
	height: 14px;
	margin-top: 3px;
	fill: var(--pb-pink);
}

.pb-contact small { color: #9a9a9a; }

.pb-jingle
{
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 1;
	text-align: left;
}

.pb-jingle svg { fill: var(--pb-pink); }
.pb-jingle:hover svg { fill: var(--pb-pink-medium); }

.pb-social
{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 22px;
}

.pb-social a { line-height: 1; }
.pb-social svg { width: 20px; height: 20px; fill: currentColor; }

/* --- Subfooter --- */

.pb-subfooter
{
	background: var(--pb-white);
	color: var(--pb-muted);
	padding: 14px 0 18px 0;
	font-size: 12.5px;
}

.pb-subfooter-inner
{
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.pb-subfooter a { color: var(--pb-muted); }

.pb-subfooter-legal
{
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.pb-subfooter-legal img { flex: 0 0 auto; }
.pb-subfooter-warning { line-height: 1.5; }

/* ==========================================================================
   15. WordPress core classes not covered above
   ========================================================================== */

.sticky {}
.bypostauthor {}
.wp-caption { max-width: 100%; }
.gallery-caption {}

.wp-block-image figcaption { text-align: inherit; }

.wp-block-search__input { border: 1px solid var(--pb-medium-gray) !important; }

/* Admin bar keeps the sticky header from hiding under it. */
body.admin-bar .pb-site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .pb-site-header { top: 46px; } }

/* ==========================================================================
   16. Responsive
   ========================================================================== */

/* Rail drops before the article measure does, so long-form never gets
   squeezed into a narrow column on tablets. */
@media (max-width: 1100px)
{
	:root { --pb-rail: 236px; }
	.pb-article-grid { gap: 40px; }
}

@media (max-width: 980px)
{
	.pb-article-grid
	{
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.pb-article-body { max-width: var(--pb-measure); }

	.pb-rail
	{
		position: static;
		max-width: var(--pb-measure);
		margin-top: 34px;
		padding-top: 22px;
		border-top: 1px solid var(--pb-medium-gray);
	}

	/* On one column the TOC is noise, the reader can just scroll. */
	.pb-rail .pb-toc { display: none !important; }

	.pb-lead
	{
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.pb-lead-body h2 { font-size: 25px; }

	.pb-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 860px)
{
	.pb-primary-nav,
	.pb-header-search { display: none; }

	.pb-nav-toggle { display: block; }

	/* Slide-in drawer, same behavior as the porkbun.com mobile nav. */
	.pb-primary-nav.is-drawer
	{
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 1050;
		width: 290px;
		max-width: 88vw;
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: var(--pb-white);
		transform: translateX(106%);
		transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.pb-primary-nav.is-drawer.is-open
	{
		transform: translateX(0);
		box-shadow: -4px 0 22px rgba(0, 0, 0, 0.16);
	}

	.pb-drawer-head
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 2;
		padding: 13px 16px;
		border-bottom: 1px solid var(--pb-hairline);
		background: var(--pb-white);
	}

	.pb-drawer-head img { width: 30px; height: 30px; }

	.pb-drawer-close
	{
		padding: 4px 8px;
		border: 0;
		border-radius: 4px;
		background: none;
		color: #999;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}

	.pb-drawer-close:hover { color: var(--pb-pink); background: var(--pb-light-gray); }

	.pb-primary-nav.is-drawer > ul
	{
		display: block;
		gap: 0;
	}

	.pb-primary-nav.is-drawer li { border-bottom: 1px solid #f2f2f2; }

	.pb-primary-nav.is-drawer a
	{
		padding: 13px 16px;
		font-size: 15px;
		white-space: normal;
	}

	.pb-primary-nav.is-drawer .sub-menu
	{
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		border: 0;
		box-shadow: none;
		background: #f7f7f7;
		padding: 0;
	}

	.pb-primary-nav.is-drawer .sub-menu a { padding-left: 30px; font-size: 14px; }

	.pb-drawer-search
	{
		display: block;
		padding: 14px 16px;
		border-bottom: 1px solid #f2f2f2;
	}

	.pb-drawer-search .pb-header-search { display: flex; width: 100%; }
	.pb-drawer-search .pb-header-search:focus-within { width: 100%; }
}

@media (max-width: 720px)
{
	:root
	{
		--pb-text: 16.5px;
		--pb-gutter: 18px;
	}

	.pb-brand-mark { width: 40px; height: 40px; }
	.pb-brand-word { font-size: 23px; }
	.pb-brand-text { gap: 6px; }

	/* Header row: the brand, the CTA and the menu toggle are all flex items
	   with flex: 0 0 auto, so at phone widths their intrinsic widths added up
	   to more than the viewport and pushed a horizontal scrollbar onto every
	   page. Closing the gap and letting the brand shrink buys most of it back;
	   the rule at 560px below buys the rest. */
	.pb-header-inner { gap: 12px; }
	.pb-brand { min-width: 0; }
	.pb-brand-text { min-width: 0; }

	.pb-article-head h1 { font-size: 27px; }
	.pb-article-head { max-width: none; padding-bottom: 14px; }
	.pb-prose > p:first-of-type { font-size: 17.5px; }
	.pb-hero { max-height: 190px; margin-bottom: 22px; }
	.pb-hero img { max-height: 190px; }

	.pb-grid { grid-template-columns: 1fr; gap: 28px; }

	.pb-archive-head h1 { font-size: 23px; }

	.pb-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }

	.pb-prose .alignwide,
	.pb-prose .alignfull
	{
		width: 100%;
		margin-left: 0;
	}

	.pb-prose .alignleft,
	.pb-prose .alignright
	{
		float: none;
		max-width: 100%;
		margin: 1.4em 0;
	}

	.pb-footer-grid { grid-template-columns: 1fr; gap: 26px; }
	.pb-footer-links { grid-template-columns: 1fr 1fr; gap: 22px; }
	.pb-subfooter-inner { grid-template-columns: 1fr; }
	.pb-adjacent--next { text-align: left; }
}

@media (max-width: 560px)
{
	/* The domain-search CTA does not fit beside the brand and the menu toggle
	   at phone widths. Forcing it in was what pushed the document wider than
	   the viewport. It stays reachable from the nav drawer, the article rail
	   and the footer, so nothing is lost but the duplicate. */
	.pb-header-actions .pb-btn { display: none; }
}

/* ==========================================================================
   17. Motion and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce)
{
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after
	{
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

@media print
{
	.pb-site-header,
	.pb-header-rule,
	.pb-progress,
	.pb-rail,
	.pb-site-footer,
	.pb-subfooter,
	.pb-adjacent,
	.pb-related,
	.pb-pagination { display: none !important; }

	.pb-article-grid { display: block; }
	body { font-size: 11pt; color: #000; }
	a { text-decoration: none; color: #000; }
	.pb-prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}