/*
Theme Name: JGH Platinum
Theme URI: https://johnhendron.net/
Author: John Hendron
Author URI: https://johnhendron.net/
Description: A personal theme for johnhendron.net. Platinum tones from the Macintosh SE, Source Sans 3 and Playfair Display, a 750px reading column on a light “screen” sheet, and a frosted-glass menu tray.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jgh-platinum
Tags: blog, portfolio, one-column, custom-logo, custom-menu, block-styles, wide-blocks, accessibility-ready
*/

/* =========================================================================
   1. Tokens
   ====================================================================== */

:root {
	--ink: var(--wp--preset--color--ink, #23211D);
	--ink-soft: var(--wp--preset--color--ink-soft, #524C42);
	--screen: var(--wp--preset--color--screen, #F7F5EE);
	--paper: var(--wp--preset--color--paper, #FBFAF6);
	--plat-1: var(--wp--preset--color--platinum-light, #D5D3C4);
	--plat-2: var(--wp--preset--color--platinum, #B0AB96);
	--plat-3: var(--wp--preset--color--platinum-dark, #8F8876);
	--blue: var(--wp--preset--color--se-blue, #28629A);
	--blue-deep: var(--wp--preset--color--se-blue-deep, #1F4F7E);
	--red: var(--wp--preset--color--se-red, #A93524);
	--six-colors: linear-gradient(180deg,
		#61BB46 0 16.66%, #FDB827 16.66% 33.33%, #F5821F 33.33% 50%,
		#E03A3E 50% 66.66%, #963D97 66.66% 83.33%, #009DDC 83.33% 100%);

	--font-body: var(--wp--preset--font-family--body, 'Source Sans 3', sans-serif);
	--font-display: var(--wp--preset--font-family--display, 'Playfair Display', Georgia, serif);

	/* Reading column: 750px max, shrinks with the window. On phones the
	   sheet goes edge to edge and the text fills the middle 80%. */
	--measure: 750px;
	--pad: clamp(1.25rem, 10vw, 4rem);
	--gutter: clamp(0px, calc(4vw - 1.5rem), 2rem);
	--sheet-w: min(calc(100% - 2 * var(--gutter)), calc(var(--measure) + 2 * var(--pad)));

	--radius: 12px;
	--hairline: rgba(143, 136, 118, 0.45);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 6.5rem;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--ink);
	background-color: var(--plat-1);
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--base, 1.1875rem);
	line-height: 1.65;
	font-kerning: normal;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* The platinum case: a fixed gradient with a whisper of plastic grain. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.13 0 0 0 0 0.11 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		linear-gradient(180deg, var(--plat-1) 0%, #C6C2B1 55%, var(--plat-2) 100%);
}

.site-content {
	flex: 1 0 auto;
}

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

img {
	height: auto;
	vertical-align: middle;
}

::selection {
	background: rgba(40, 98, 154, 0.22);
}

a {
	color: var(--blue);
	text-decoration-line: underline;
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(40, 98, 154, 0.45);
	transition: color 0.15s, text-decoration-color 0.15s, text-decoration-thickness 0.15s;
}

a:hover {
	color: var(--blue-deep);
	text-decoration-color: var(--red);
	text-decoration-thickness: 0.11em;
}

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: var(--ink);
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--screen);
	color: var(--ink);
	border-radius: 8px;
	box-shadow: 0 6px 20px -8px rgba(35, 33, 29, 0.5);
}

/* =========================================================================
   3. Header + glass menu tray
   ====================================================================== */

.site-header {
	position: sticky;
	top: 0.75rem;
	z-index: 50;
	width: var(--sheet-w);
	margin: 0.75rem auto 1.5rem;
}

.admin-bar .site-header {
	top: calc(32px + 0.75rem);
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 0.75rem;
	}
}

.tray {
	position: relative;
	z-index: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	min-height: 4.25rem;
	padding: 0.5rem 0.625rem 0.5rem 1.125rem;
	border-radius: 18px;
}

/* The glass lives on a pseudo-element so dropdowns can blur on their own
   (nested backdrop-filters don't composite correctly in Chromium). */
.tray::before,
.sub-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(247, 245, 238, 0.56);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		inset 0 -1px 0 rgba(143, 136, 118, 0.22),
		0 2px 6px -2px rgba(35, 33, 29, 0.12),
		0 14px 32px -18px rgba(35, 33, 29, 0.45);
	transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.site-header.is-scrolled .tray::before {
	background: rgba(247, 245, 238, 0.5);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		inset 0 -1px 0 rgba(143, 136, 118, 0.22),
		0 4px 10px -4px rgba(35, 33, 29, 0.18),
		0 22px 44px -22px rgba(35, 33, 29, 0.55);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tray::before,
	.sub-menu::before,
	.site-header.is-scrolled .tray::before {
		background: rgba(247, 245, 238, 0.97);
	}
}

@media (prefers-reduced-transparency: reduce) {
	.tray::before,
	.sub-menu::before,
	.site-header.is-scrolled .tray::before {
		background: rgba(247, 245, 238, 0.98);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Logo: the signature mark, tinted with the ink color via a CSS mask. */
.site-logo {
	display: block;
	flex: 0 0 auto;
	height: 3.25rem;
	aspect-ratio: var(--logo-ratio, 1);
	text-decoration: none;
}

.site-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-logo.is-tinted::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--ink);
	-webkit-mask: var(--logo) center / contain no-repeat;
	mask: var(--logo) center / contain no-repeat;
	transition: background-color 0.2s;
}

.site-logo.is-tinted:hover::before {
	background-color: var(--red);
}

/* Menu, shared */
.primary-nav .menu,
.primary-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	display: block;
	color: var(--ink);
	text-decoration: none;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
	border-radius: 10px;
}

.submenu-toggle {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ink-soft);
	cursor: pointer;
}

.submenu-toggle svg {
	transition: transform 0.2s var(--ease);
}

.submenu-toggle:hover {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.55);
}

.menu-item-has-children.is-open > .submenu-toggle svg {
	transform: rotate(180deg);
}

/* Mobile toggle */
.menu-toggle {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.menu-toggle:hover {
	background: rgba(255, 255, 255, 0.55);
}

.menu-toggle__icon {
	position: relative;
	display: block;
	width: 1.25rem;
	height: 0.75rem;
	margin: auto;
}

.menu-toggle__icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}

.menu-toggle__icon span:first-child { top: 0; }
.menu-toggle__icon span:last-child { top: calc(100% - 1.5px); }

.is-menu-open .menu-toggle__icon span:first-child {
	top: calc(50% - 0.75px);
	transform: rotate(45deg);
}

.is-menu-open .menu-toggle__icon span:last-child {
	top: calc(50% - 0.75px);
	transform: rotate(-45deg);
}

/* ---- Desktop: one line, dropdown panels -------------------------------- */

@media (min-width: 961px) {
	.primary-nav .menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.125rem;
	}

	.primary-nav .menu > li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.primary-nav .menu > li > a {
		position: relative;
		padding: 0.6rem 0.8rem;
		white-space: nowrap;
	}

	.primary-nav .menu > .menu-item-has-children > a {
		padding-right: 0.25rem;
	}

	.primary-nav .menu > li > .submenu-toggle {
		margin-right: 0.25rem;
	}

	.primary-nav .menu > li > a:hover {
		background: rgba(255, 255, 255, 0.55);
	}

	/* Current page: a short red rule, the palette's accent. */
	.primary-nav .menu > li > a::after {
		content: "";
		position: absolute;
		left: 0.8rem;
		right: 0.8rem;
		bottom: 0.3rem;
		height: 2px;
		border-radius: 2px;
		background: var(--red);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.25s var(--ease);
	}

	.primary-nav .menu > .menu-item-has-children > a::after {
		right: 0.25rem;
	}

	.primary-nav .menu > .current-menu-item > a::after,
	.primary-nav .menu > .current-menu-ancestor > a::after,
	.primary-nav .menu > .current_page_item > a::after,
	.primary-nav .menu > .current_page_ancestor > a::after {
		transform: scaleX(1);
	}

	/* Dropdown */
	.primary-nav .sub-menu {
		position: absolute;
		top: calc(100% + 0.625rem);
		left: -0.25rem;
		z-index: 1;
		min-width: 15.5rem;
		padding: 0.4rem;
		border-radius: 14px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
	}

	.primary-nav .sub-menu::before {
		background: rgba(247, 245, 238, 0.82);
	}

	/* Hover bridge across the gap. */
	.primary-nav .sub-menu::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 0.75rem;
	}

	.primary-nav .sub-menu li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.primary-nav .sub-menu a {
		flex: 1;
		padding: 0.55rem 0.75rem;
		font-size: 1rem;
	}

	.primary-nav .sub-menu a:hover {
		background: rgba(40, 98, 154, 0.09);
	}

	.primary-nav .sub-menu .current-menu-item > a {
		box-shadow: inset 2px 0 0 var(--red);
		border-radius: 2px 10px 10px 2px;
	}

	.primary-nav .sub-menu .submenu-toggle svg {
		transform: rotate(-90deg);
	}

	.primary-nav .sub-menu .sub-menu {
		top: -0.4rem;
		left: calc(100% + 0.5rem);
	}

	.primary-nav .sub-menu .sub-menu::after {
		left: auto;
		right: 100%;
		bottom: 0;
		top: 0;
		width: 0.75rem;
		height: auto;
	}

	@media (hover: hover) {
		.primary-nav li:hover > .sub-menu {
			opacity: 1;
			visibility: visible;
			transform: none;
			transition-delay: 0s;
		}
	}

	.primary-nav li.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
}

/* ---- Mobile: hamburger, panel expands inside the tray ------------------- */

@media (max-width: 960px) {
	.site-header {
		width: calc(100% - 1.5rem);
	}

	.menu-toggle {
		display: block;
	}

	.primary-nav {
		display: none;
		flex: 1 0 100%;
		max-height: calc(100vh - 7rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0.25rem 0 0.5rem;
		border-top: 1px solid var(--hairline);
	}

	.is-menu-open .primary-nav {
		display: block;
		animation: jgh-drop 0.22s var(--ease);
	}

	/* Open on phones: near-solid, so a long menu stays legible over content. */
	.is-menu-open .tray::before {
		background: rgba(247, 245, 238, 0.97);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.primary-nav li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.primary-nav a {
		flex: 1;
		padding: 0.7rem 0.5rem;
		font-size: 1.125rem;
	}

	.primary-nav .current-menu-item > a {
		color: var(--red);
	}

	/* Submenus are listed open on small screens: fewer taps. */
	.submenu-toggle {
		display: none;
	}

	.primary-nav .sub-menu::before {
		display: none;
	}

	.primary-nav .sub-menu {
		flex: 1 0 100%;
		margin: 0 0 0.35rem 0.5rem;
		padding-left: 0.75rem;
		border-left: 1px solid var(--hairline);
	}

	.primary-nav .sub-menu a {
		padding-block: 0.5rem;
		font-size: 1.0625rem;
		color: var(--ink-soft);
	}
}

@keyframes jgh-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* =========================================================================
   4. The sheet (main content surface)
   ====================================================================== */

.sheet {
	width: var(--sheet-w);
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 3.75rem) var(--pad) clamp(2.5rem, 7vw, 4.5rem);
	background: var(--screen);
	border-radius: var(--radius);
	box-shadow:
		0 0 0 1px var(--hairline),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 4px -2px rgba(35, 33, 29, 0.12),
		0 30px 60px -36px rgba(35, 33, 29, 0.5);
}

@media (max-width: 600px) {
	.sheet {
		border-radius: 0;
		box-shadow: 0 -1px 0 var(--hairline), 0 1px 0 var(--hairline);
	}
}

/* ---- Entry header ------------------------------------------------------ */

.entry-header,
.page-header {
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.entry-title,
.page-title {
	margin: 0;
	text-wrap: pretty;
	font-size: var(--wp--preset--font-size--xx-large, clamp(2.125rem, 1.3rem + 3.2vw, 3.375rem));
	line-height: 1.08;
	letter-spacing: -0.012em;
}

.entry-eyebrow {
	margin: 0 0 0.85rem;
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
}

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

.entry-eyebrow a:hover {
	text-decoration: underline;
	text-decoration-color: currentColor;
}

.entry-eyebrow .sep {
	margin: 0 0.5em;
	opacity: 0.5;
}

.entry-meta {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

.entry-meta .sep {
	margin: 0 0.6em;
	color: var(--plat-3);
}

.archive-description {
	margin-top: 1rem;
	color: var(--ink-soft);
}

.archive-description p {
	margin: 0;
}

.entry-hero {
	margin: 0 0 clamp(2rem, 4vw, 2.75rem);
}

.entry-hero img {
	display: block;
	width: 100%;
	border-radius: 8px;
}

/* ---- Content flow ------------------------------------------------------ */

.entry-content > * {
	margin-block: 0;
}

.entry-content > * + * {
	margin-block-start: 1.3em;
}

.entry-content > h2 {
	margin-block-start: 1.45em;
}

.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6 {
	margin-block-start: 1.75em;
}

.entry-content > h2 + *,
.entry-content > h3 + *,
.entry-content > h4 + * {
	margin-block-start: 0.75em;
}

.entry-content > :first-child {
	margin-block-start: 0;
}

/* Wide reaches halfway into the sheet margin; full bleeds to its edges. */
.entry-content > .alignwide,
.entry-hero.alignwide {
	margin-inline: calc(var(--pad) * -0.5);
}

.entry-content > .alignfull {
	margin-inline: calc(var(--pad) * -1);
	max-width: none;
	border-radius: 0;
}

.entry-content > .alignfull img {
	border-radius: 0;
}

@media (min-width: 700px) {
	.alignleft {
		float: left;
		margin: 0.35em 1.5em 1em 0;
		max-width: 50%;
	}

	.alignright {
		float: right;
		margin: 0.35em 0 1em 1.5em;
		max-width: 50%;
	}
}

.aligncenter {
	margin-inline: auto;
	text-align: center;
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

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

.entry-content li + li {
	margin-top: 0.35em;
}

.entry-content li::marker {
	color: var(--plat-3);
}

.entry-content ol > li::marker {
	font-weight: 600;
	color: var(--ink-soft);
}

.entry-content img {
	border-radius: 6px;
}

.wp-element-caption,
figcaption {
	margin-top: 0.65rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--ink-soft);
	text-align: center;
}

.wp-block-quote {
	margin-inline: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--font-body);
	font-style: normal;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

.wp-block-pullquote {
	padding: 1.75rem 0;
	text-align: center;
}

hr,
.wp-block-separator {
	border: 0;
	height: 1px;
	width: 6rem;
	margin-inline: auto;
	background: var(--plat-3);
	opacity: 1;
}

.entry-content > hr,
.entry-content > .wp-block-separator {
	margin-block: 2.75rem;
}

.wp-block-separator.is-style-wide {
	width: 100%;
	background: var(--hairline);
}

.wp-block-separator.is-style-dots {
	background: none;
	height: auto;
	width: auto;
	color: var(--plat-3);
}

code,
kbd {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.88em;
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: #ECE9DE;
}

pre code {
	padding: 0;
	background: none;
}

pre {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 1rem;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.6rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	text-align: left;
}

.wp-block-table thead th {
	font-weight: 650;
	border-bottom: 2px solid var(--ink);
}

/* ---- Buttons ------------------------------------------------------------
   Button block, File block "Download", search and comment submit.
   Same 10px radius as the menu; hover lifts with a shadow and the label
   keeps its color. Selectors outrank the global a:hover rule. */

.entry-content .wp-element-button,
.entry-content .wp-block-button__link,
.entry-content .wp-block-file__button,
.search-submit,
.comment-form .submit {
	display: inline-block;
	padding: 0.7em 1.3em;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--screen);
	background-color: var(--blue);
	border: 0;
	border-radius: 10px;
	text-decoration: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 1px 2px rgba(35, 33, 29, 0.18);
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s;
	cursor: pointer;
}

.entry-content .wp-element-button:hover,
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-file__button:hover,
.entry-content .wp-element-button:focus-visible,
.entry-content .wp-block-button__link:focus-visible,
.entry-content .wp-block-file__button:focus-visible,
.search-submit:hover,
.comment-form .submit:hover {
	color: var(--screen);
	text-decoration: none;
	opacity: 1; /* core dims the File button on hover */
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 2px 4px -1px rgba(35, 33, 29, 0.22),
		0 10px 22px -10px rgba(40, 98, 154, 0.75);
}

.entry-content .wp-element-button:active,
.entry-content .wp-block-button__link:active,
.entry-content .wp-block-file__button:active,
.search-submit:active,
.comment-form .submit:active {
	transform: none;
	box-shadow:
		inset 0 1px 2px rgba(35, 33, 29, 0.25),
		0 1px 1px rgba(35, 33, 29, 0.12);
}

/* Outline style: same behavior, blue label on a clear ground. */
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--blue);
	background-color: transparent;
	border: 1.5px solid currentColor;
	box-shadow: none;
}

.entry-content .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	color: var(--blue);
	background-color: var(--paper);
	box-shadow:
		0 2px 4px -1px rgba(35, 33, 29, 0.14),
		0 10px 22px -12px rgba(40, 98, 154, 0.6);
}

/* File block: file name and Download button on one line, wrapping on phones. */
.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

.wp-block-file:not(.wp-element-button) {
	font-size: inherit;
}

.wp-block-file > a:not(.wp-block-file__button) {
	font-weight: 600;
}

.entry-content .wp-block-file .wp-block-file__button {
	margin-left: 0;
	font-size: 1rem;
}

.wp-block-file__embed {
	flex: 1 0 100%;
	border-radius: 8px;
}

.wp-block-embed iframe {
	width: 100%;
	border-radius: 8px;
}

/* ---- Entry footer, post navigation, pagination -------------------------- */

.entry-footer {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hairline);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag-list a {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	background: #EDEADF;
	border-radius: 999px;
}

.tag-list a:hover {
	color: var(--blue-deep);
	background: rgba(40, 98, 154, 0.1);
}

.post-navigation {
	margin-top: 3rem;
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.post-navigation .nav-next {
	grid-column: 2;
	text-align: right;
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: 1rem 1.15rem;
	color: var(--ink);
	text-decoration: none;
	border: 1px solid var(--hairline);
	border-radius: 10px;
	transition: border-color 0.2s, background-color 0.2s;
}

.post-navigation a:hover {
	border-color: var(--plat-3);
	background: var(--paper);
}

.nav-label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
}

.nav-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
}

@media (max-width: 600px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	.post-navigation .nav-next {
		grid-column: auto;
	}
}

.pagination {
	margin-top: 3rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	border-radius: 999px;
}

.pagination a.page-numbers:hover {
	background: rgba(40, 98, 154, 0.09);
}

.pagination .page-numbers.current {
	color: var(--screen);
	background: var(--ink);
}

/* ---- List view (blog index, archives) ---------------------------------- */

.post-list > .list-item + .list-item {
	margin-top: 2.25rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--hairline);
}

.list-item__media {
	display: block;
	margin-bottom: 1.25rem;
}

.list-item__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

.list-item .entry-meta {
	margin: 0 0 0.4rem;
	font-size: 0.875rem;
}

.list-item__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.75rem);
	line-height: 1.2;
}

.list-item__title a {
	color: var(--ink);
	text-decoration: none;
}

.list-item__title a:hover {
	color: var(--blue-deep);
}

.list-item__excerpt p {
	margin: 0.6rem 0 0;
	color: var(--ink-soft);
}

.read-more {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 650;
	text-decoration: none;
}

.read-more::after {
	content: " →";
	display: inline-block;
	transition: transform 0.2s var(--ease);
}

.read-more:hover::after {
	transform: translateX(3px);
}

/* ---- Grid view (portfolio, presentations) ------------------------------ */

.post-grid,
.portfolio-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	gap: 1.75rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border-radius: 10px;
	box-shadow: 0 0 0 1px var(--hairline);
	overflow: hidden;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px var(--plat-3), 0 16px 30px -20px rgba(35, 33, 29, 0.45);
}

.card__link {
	display: block;
	color: var(--ink);
	text-decoration: none;
}

.card__link:hover {
	color: var(--ink);
}

.card__media {
	aspect-ratio: 4 / 3;
	background: #E6E3D7;
	border-bottom: 1px solid var(--hairline);
}

.card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No image: classic Mac desktop pinstripe. */
.card__media.is-empty {
	background:
		repeating-linear-gradient(0deg, rgba(143, 136, 118, 0.18) 0 1px, transparent 1px 3px),
		#E6E3D7;
}

.card__body {
	padding: 1rem 1.15rem 0.25rem;
}

.card__title {
	margin: 0;
	font-size: 1.3125rem;
	line-height: 1.25;
}

.card__link:hover .card__title {
	color: var(--blue-deep);
}

.card__date {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.card__excerpt {
	margin: 0.5rem 1.15rem 1.15rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

.card > .card__link:last-child .card__body {
	padding-bottom: 1.15rem;
}

/* Query Loop version (Portfolio grid pattern) */
.portfolio-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--paper);
	border-radius: 10px;
	box-shadow: 0 0 0 1px var(--hairline);
	overflow: hidden;
}

/* Posts without a featured image get the pinstripe placeholder too. */
.portfolio-grid .wp-block-post:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	border-bottom: 1px solid var(--hairline);
	background:
		repeating-linear-gradient(0deg, rgba(143, 136, 118, 0.18) 0 1px, transparent 1px 3px),
		#E6E3D7;
}

.portfolio-grid .wp-block-post-featured-image {
	margin: 0;
	border-bottom: 1px solid var(--hairline);
}

.portfolio-grid .wp-block-post-featured-image img {
	border-radius: 0;
}

.portfolio-grid .wp-block-post-title {
	margin: 1rem 1.15rem 0;
	font-size: 1.3125rem;
	line-height: 1.25;
}

.portfolio-grid .wp-block-post-title a {
	color: var(--ink);
	text-decoration: none;
}

.portfolio-grid .wp-block-post-title a:hover {
	color: var(--blue-deep);
}

.portfolio-grid .wp-block-post-date {
	margin: 0.35rem 1.15rem 1.15rem;
	font-size: 0.875rem;
	color: var(--ink-soft);
}

/* ---- Search form, comments --------------------------------------------- */

.search-form {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

.search-form label {
	flex: 1;
}

.search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--plat-3);
	border-radius: 8px;
}

.search-submit,
.comment-form .submit {
	padding: 0.65rem 1.2rem;
	font-size: 1rem;
}

.comments {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hairline);
	font-size: 1.0625rem;
}

.comments-title,
.comment-reply-title {
	font-size: var(--wp--preset--font-size--large, 1.75rem);
	margin: 0 0 1.5rem;
}

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	margin-left: 1.5rem;
	padding-left: 1rem;
	border-left: 1px solid var(--hairline);
}

.comment-body {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--hairline);
}

.comment-author .avatar {
	float: left;
	margin-right: 0.75rem;
	border-radius: 50%;
}

.comment-meta {
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.comment-meta a {
	color: inherit;
}

.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

/* =========================================================================
   5. Block styles (pick these in the editor's Styles panel)
   ====================================================================== */

/* Group → Card */
.is-style-card {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow:
		0 0 0 1px var(--hairline),
		inset 0 1px 0 #fff,
		0 12px 28px -22px rgba(35, 33, 29, 0.45);
}

/* Group → Platinum panel (the Mac SE case) */
.is-style-panel {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: linear-gradient(180deg, #DEDCD0, var(--plat-1));
	border-radius: var(--radius);
	box-shadow:
		0 0 0 1px var(--plat-3),
		inset 0 1px 0 rgba(255, 255, 255, 0.75),
		inset 0 -2px 0 rgba(143, 136, 118, 0.25);
}

/* SE blue fails AA on platinum; deepen links inside panels. */
.is-style-panel a:not(.wp-element-button) {
	color: var(--blue-deep);
}

.is-style-card > :first-child,
.is-style-panel > :first-child,
.is-style-accent > :first-child {
	margin-top: 0;
}

.is-style-card > :last-child,
.is-style-panel > :last-child,
.is-style-accent > :last-child {
	margin-bottom: 0;
}

/* Group → Red accent rule */
.is-style-accent {
	padding-left: 1.25rem;
	border-left: 3px solid var(--red);
}

/* Group → Timeline (résumé, career history) */
.is-style-timeline {
	position: relative;
	padding-left: 1.75rem;
}

.is-style-timeline::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 0.6rem;
	bottom: 0.6rem;
	width: 1px;
	background: var(--plat-2);
}

.is-style-timeline > h3,
.is-style-timeline > h4 {
	position: relative;
	margin-top: 2rem;
	font-size: 1.375rem;
}

.is-style-timeline > h3:first-child,
.is-style-timeline > h4:first-child {
	margin-top: 0;
}

.is-style-timeline > h3::before,
.is-style-timeline > h4::before {
	content: "";
	position: absolute;
	left: -1.75rem;
	top: 0.4em;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background: var(--screen);
	box-shadow: 0 0 0 2px var(--red);
}

/* Bibliography: hanging indent, as in a reference list.
   Group → Bibliography styles every paragraph inside it;
   List → Bibliography styles each item; Paragraph → Bibliography entry
   styles a single entry. */
.is-style-bibliography > p,
ul.is-style-bibliography > li,
ol.is-style-bibliography > li,
p.is-style-bibliography {
	padding-left: 2em;
	text-indent: -2em;
	font-size: 1.0625rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
	hyphens: manual;
}

.is-style-bibliography > p + p,
ul.is-style-bibliography > li + li,
ol.is-style-bibliography > li + li,
p.is-style-bibliography + p.is-style-bibliography {
	margin-top: 0.9em;
}

ul.is-style-bibliography,
ol.is-style-bibliography {
	list-style: none;
	padding-left: 0;
}

.is-style-bibliography a {
	text-indent: 0;
}

/* Image → Mac window: a System 6–style title bar */
.wp-block-image.is-style-window,
.wp-block-post-featured-image.is-style-window {
	position: relative;
	padding-top: 22px;
	background: var(--paper);
	border-radius: 7px 7px 4px 4px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px var(--ink),
		0 18px 36px -24px rgba(35, 33, 29, 0.55);
}

.wp-block-image.is-style-window::before,
.wp-block-post-featured-image.is-style-window::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 22px;
	border-bottom: 1px solid var(--ink);
	background:
		repeating-linear-gradient(180deg, var(--ink) 0 1px, transparent 1px 3px) 6px 5px / calc(100% - 12px) 11px no-repeat,
		var(--paper);
}

.wp-block-image.is-style-window::after,
.wp-block-post-featured-image.is-style-window::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 12px;
	width: 11px;
	height: 11px;
	background: var(--paper);
	box-shadow: 0 0 0 1px var(--ink), 0 0 0 6px var(--paper);
}

.wp-block-image.is-style-window img,
.wp-block-post-featured-image.is-style-window img {
	display: block;
	width: 100%;
	border-radius: 0;
}

.wp-block-image.is-style-window figcaption {
	margin: 0;
	padding: 0.55rem 0.85rem;
	border-top: 1px solid var(--hairline);
}

/* Image → Framed: a museum mat */
.wp-block-image.is-style-framed img {
	padding: clamp(0.5rem, 2vw, 1rem);
	background: #fff;
	border-radius: 2px;
	box-shadow:
		0 0 0 1px var(--hairline),
		0 14px 30px -20px rgba(35, 33, 29, 0.55);
}

/* Separator → Six colors */
.wp-block-separator.is-style-rainbow {
	width: 3.5rem;
	height: 12px;
	border-radius: 2px;
	background: var(--six-colors);
	opacity: 1;
}

/* Paragraph → Eyebrow / Lead */
p.is-style-eyebrow {
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
}

.entry-content > p.is-style-eyebrow + * {
	margin-top: 0.4rem;
}

/* Eyebrows sit tight against the heading they label. */
.is-style-eyebrow + h2,
.is-style-eyebrow + h3,
.is-style-eyebrow + h4,
h2 + .is-style-eyebrow,
h3 + .is-style-eyebrow,
h4 + .is-style-eyebrow {
	margin-top: 0.35rem;
}

.is-style-eyebrow + p:not(.is-style-eyebrow) {
	margin-top: 0.5rem;
}

p.is-style-lead {
	font-size: var(--wp--preset--font-size--medium, 1.375rem);
	line-height: 1.5;
	color: var(--ink);
}

/* List → No bullets */
ul.is-style-plain,
ol.is-style-plain {
	list-style: none;
	padding-left: 0;
}

/* =========================================================================
   6. Footer
   ====================================================================== */

.site-footer {
	margin-top: clamp(3rem, 8vw, 5rem);
	padding-bottom: 2rem;
	color: var(--ink);
}

.footer-inner,
.footer-base {
	width: var(--sheet-w);
	margin: 0 auto;
	padding-inline: calc(var(--pad) * 0.5);
}

.footer-inner {
	display: grid;
	grid-template-columns: 1fr 1.5fr 0.8fr;
	gap: 2rem 2.5rem;
	padding-top: 2.25rem;
	border-top: 1px solid rgba(35, 33, 29, 0.2);
}

.six-colors {
	display: block;
	width: 2.25rem;
	height: 12px;
	margin-bottom: 1rem;
	border-radius: 2px;
	background: var(--six-colors);
}

.footer-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.15;
}

.footer-title a {
	color: var(--ink);
	text-decoration: none;
}

.footer-tagline {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	line-height: 1.45;
}

.footer-portrait {
	display: block;
	margin-top: 1em;
	width: 9rem;
	height: auto;
	aspect-ratio: 1;
	margin-top: 1.25rem;
	object-fit: cover;
	object-position: center 25%;
	border-radius: 14px;
	border: 1px solid rgba(35, 33, 29, 0.2);
	box-shadow: 0 1px 2px rgba(35, 33, 29, 0.15), 0 6px 16px -8px rgba(35, 33, 29, 0.35);
}

.footer-heading {
	margin: 0 0 0.85rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}

.recent-posts,
.footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.35;
}

.recent-posts li,
.footer-links li {
	margin-bottom: 0.7rem;
}

.recent-posts a,
.footer-links a {
	color: var(--ink);
	text-decoration-color: rgba(35, 33, 29, 0.3);
}

.recent-posts a:hover,
.footer-links a:hover {
	color: var(--ink);
	text-decoration-color: var(--red);
}

.recent-posts time {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
}

.footer-base {
	margin-top: 2rem;
	font-size: 0.875rem;
}

.footer-base p {
	margin: 0;
}

@media (max-width: 760px) {
	.footer-inner {
		grid-template-columns: 1fr;
		padding-inline: var(--pad);
	}

	.footer-base {
		padding-inline: var(--pad);
	}
}

/* =========================================================================
   7. Motion & print
   ====================================================================== */

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

	html {
		scroll-behavior: auto;
	}
}

@media print {
	body::before,
	.site-header,
	.site-footer,
	.post-navigation,
	.comments {
		display: none;
	}

	.sheet {
		width: auto;
		padding: 0;
		box-shadow: none;
		background: none;
	}
}