/*
Theme Name: Chalk with Zach
Theme URI: https://zacharyherndon.com/
Author: Queen Art and Design
Author URI: https://jessiqueen.com/
Description: Artist portfolio theme for Zach Herndon, Atlanta chalk artist. Warm white pages, bold type and Ben-Day dot accents so the artwork carries the color. Works with the "Zach Herndon Site" plugin for artwork, inquiries and the blog carousel.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chalk-with-zach
*/

/* -------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */
:root {
	color-scheme: light;
	--paper: #FFFAF1;
	--paper-2: #F5EDDD;
	--paper-3: #EADFCB;
	--ink: #1C1A17;
	--ink-2: #4A453E;
	--line: #D9CDB8;
	--red: #C8202F;
	--red-dark: #9E1622;
	--yellow: #FFD23F;
	--blue: #1F4FBF;
	--blue-dark: #163C93;
	--focus: #1F4FBF;

	--font-display: Archivo, "Arial Black", system-ui, sans-serif;
	--font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gutter: clamp(16px, 4vw, 40px);
	--content: 46rem;
	--wide: 75rem;
	--band: clamp(3.5rem, 8vw, 6.5rem);
	--radius: 4px;

	--dots-red: radial-gradient(circle, var(--red) 1.6px, transparent 1.9px) 0 0 / 9px 9px;
	--dots-blue: radial-gradient(circle, var(--blue) 1.6px, transparent 1.9px) 0 0 / 9px 9px;
	--dots-ink: radial-gradient(circle, rgba(28, 26, 23, 0.14) 1.4px, transparent 1.7px) 0 0 / 8px 8px;
}

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

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

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.6;
	overflow-x: clip;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-stretch: 112%;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
h4 { font-size: 1.2rem; }

p, ul, ol, dl, figure, blockquote {
	margin: 0 0 1.1em;
}

p { text-wrap: pretty; }

a {
	color: var(--blue);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover { color: var(--blue-dark); text-decoration-thickness: 0.14em; }

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

::selection { background: var(--yellow); color: var(--ink); }

.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;
}

.skip-link {
	position: absolute;
	left: var(--gutter);
	top: -100px;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--ink);
	color: var(--paper);
	font-weight: 700;
}

.skip-link:focus { top: 0.75rem; color: var(--paper); }

.site-main:focus { outline: none; }

.wrap {
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin-inline: auto;
}

.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--content)); }

/* -------------------------------------------------------------------------
   Buttons and links
   ------------------------------------------------------------------------- */
.zach-button,
.wp-block-button__link,
.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0.75em 1.4em;
	border: 2px solid var(--red);
	border-radius: var(--radius);
	background: var(--red);
	color: #fff;
	font-family: var(--font-display);
	font-stretch: 105%;
	font-size: 1rem;
	font-weight: 750;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.zach-button:hover,
.wp-block-button__link:hover,
.comment-form .submit:hover {
	background: var(--red-dark);
	border-color: var(--red-dark);
	color: #fff;
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--ink);
}

.zach-button:active,
.wp-block-button__link:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--ink);
}

.is-style-outline > .wp-block-button__link,
.zach-button--ghost {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--ink);
}

.is-style-outline > .wp-block-button__link:hover,
.zach-button--ghost:hover {
	background: var(--yellow);
	border-color: var(--ink);
	color: var(--ink);
}

.zach-button--small { min-height: 44px; padding: 0.55em 1.1em; font-size: 0.95rem; }

.zach-button[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
	.zach-button,
	.wp-block-button__link { transition: none; }
	.zach-button:hover,
	.wp-block-button__link:hover { transform: none; }
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
	margin-block: 1.75rem 0;
}

.wp-block-button { margin: 0; }

.zach-arrow-link,
.zach-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 44px;
	font-weight: 700;
	color: var(--ink);
	text-decoration-color: var(--red);
	text-decoration-thickness: 0.12em;
}

.zach-arrow-link::after,
.zach-more a::after {
	content: "→";
	font-family: var(--font-body);
	transition: transform 0.15s ease;
}

.zach-arrow-link--back::after { content: none; }
.zach-arrow-link--back::before { content: "←"; }

.zach-arrow-link:hover::after,
.zach-more a:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.zach-arrow-link::after,
	.zach-more a::after { transition: none; }
}

.eyebrow,
.zach-eyebrow {
	font-family: var(--font-display);
	font-stretch: 110%;
	font-size: 0.875rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-2);
	margin-bottom: 0.9rem;
}

.eyebrow a { color: inherit; }

/* Ben-Day underline used under section titles. */
.zach-section-title,
.zach-band > h2,
.entry-content > h2,
.wp-block-media-text__content > h2 {
	position: relative;
	padding-bottom: 0.45em;
}

.zach-section-title::after,
.zach-band > h2::after,
.entry-content > h2::after,
.wp-block-media-text__content > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 4.5rem;
	height: 10px;
	background: var(--dots-red);
}

.has-text-align-center.zach-section-title::after,
.has-text-align-center::after { left: 50%; transform: translateX(-50%); }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 250, 241, 0.96);
	border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(6px)) {
	.site-header { background: rgba(255, 250, 241, 0.88); backdrop-filter: blur(6px); }
}

.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin-inline: auto;
	min-height: 72px;
}

.brand {
	display: inline-flex;
	flex-direction: column;
	padding-block: 0.5rem;
	color: var(--ink);
	text-decoration: none;
	line-height: 1;
}

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

.brand__name {
	font-family: var(--font-display);
	font-stretch: 118%;
	font-weight: 900;
	font-size: 1.35rem;
	letter-spacing: -0.01em;
}

.brand__role {
	margin-top: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--red);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 0.8rem;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--radius);
}

.site-nav__list a:hover { background: var(--paper-2); color: var(--ink); }

.site-nav__list a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.4em;
}

.site-nav__list .menu-item--cta { margin-left: 0.5rem; }

.site-nav__list .menu-item--cta a {
	padding-inline: 1.15rem;
	background: var(--red);
	border: 2px solid var(--red);
	color: #fff;
	box-shadow: 3px 3px 0 var(--ink);
}

.site-nav__list .menu-item--cta a:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

.site-nav__list .menu-item--cta a[aria-current="page"] { text-decoration-color: #fff; }

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.4rem 0.9rem;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font: 700 1rem/1 var(--font-body);
	cursor: pointer;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after,
.nav-toggle__icon span {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.nav-toggle__icon { position: relative; background: transparent; }
.nav-toggle__icon::before,
.nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 899px) {
	.js .nav-toggle { display: inline-flex; }

	.site-header__inner { flex-wrap: wrap; }

	.site-nav { flex-basis: 100%; }

	.js .site-nav { display: none; }

	.js .nav-open .site-nav { display: block; padding-bottom: 1rem; }

	.no-js .site-nav__list { flex-wrap: wrap; padding-bottom: 0.5rem; }

	.js .site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
		border-top: 1px solid var(--line);
		padding-top: 0.75rem;
	}

	.js .site-nav__list a { width: 100%; font-size: 1.125rem; padding: 0.7rem 0.5rem; }

	.site-nav__list .menu-item--cta { margin: 0.5rem 0 0; }

	.js .site-nav__list .menu-item--cta a { justify-content: center; }
}

/* -------------------------------------------------------------------------
   Page structure and block content
   ------------------------------------------------------------------------- */
.page-header {
	position: relative;
	padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}

.page-header__inner {
	width: min(100%, var(--wide));
	margin-inline: auto;
}

.page-title {
	max-width: 18ch;
	margin: 0;
	font-size: clamp(2.6rem, 1.7rem + 4.4vw, 5.25rem);
	font-weight: 900;
	font-stretch: 118%;
	line-height: 0.96;
}

.page-header::after {
	content: "";
	display: block;
	width: min(100%, var(--wide));
	height: 12px;
	margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
	background: var(--dots-red);
	mask-image: linear-gradient(90deg, #000 0, #000 9rem, transparent 9rem);
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 9rem, transparent 9rem);
}

.page-intro {
	max-width: 40rem;
	margin: 1.25rem 0 0;
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
	color: var(--ink-2);
}

.post-meta { margin: 1.25rem 0 0; color: var(--ink-2); }
.post-meta a { color: inherit; }

.entry-content {
	padding-inline: var(--gutter);
	padding-bottom: var(--band);
}

.entry-content--home { padding-bottom: 0; }

/* Page content: a readable column that lines up with the page title on the left. */
.entry-content > * {
	max-width: var(--content);
	margin-left: max(0px, calc((100% - var(--wide)) / 2)) !important;
	margin-right: auto !important;
}

.entry-content > .alignwide { max-width: var(--wide); }

.entry-content > .alignfull { max-width: none; }

/* Constrained groups (home sections, closing invitations) center their content. */
.wp-block-group.is-layout-constrained > * {
	max-width: var(--content);
	margin-left: auto !important;
	margin-right: auto !important;
}

.wp-block-group.is-layout-constrained > .alignwide { max-width: var(--wide); }

.wp-block-group.is-layout-constrained > .alignfull { max-width: none; }

.entry-content > .alignfull {
	width: auto;
	margin-left: calc(-1 * var(--gutter)) !important;
	margin-right: calc(-1 * var(--gutter)) !important;
	padding-inline: var(--gutter);
}

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

.entry-content h2 { margin-top: 2.25em; }
.entry-content h3 { margin-top: 1.75em; }
.entry-content > .wp-block-group:first-child h2:first-child,
.entry-content .wp-block-group > h2:first-child,
.entry-content .wp-block-column > h2:first-child,
.entry-content .wp-block-column > h3:first-child,
.entry-content .wp-block-media-text__content > :first-child { margin-top: 0; }

.entry-content ul:not([role="list"]):not(.wp-block-gallery),
.entry-content ol { padding-left: 1.25em; }

.entry-content li { margin-bottom: 0.4em; }

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

.has-large-font-size,
.zach-lead {
	font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.45rem);
	line-height: 1.5;
}

.wp-block-image img,
.wp-block-media-text__media img { border-radius: var(--radius); }

.wp-block-image figcaption,
.wp-element-caption,
figcaption {
	margin-top: 0.6rem;
	font-size: 0.9375rem;
	color: var(--ink-2);
}

.wp-block-separator {
	border: 0;
	height: 10px;
	background: var(--dots-ink);
	margin-block: 3rem;
}

.wp-block-quote {
	margin-block: 2rem;
	padding-left: 1.25rem;
	border-left: 6px solid var(--yellow);
	font-size: 1.25rem;
}

/* Columns (core block), stacked on small screens. */
.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-block: 2rem;
}

.wp-block-column { flex: 1 1 0; min-width: 0; }

@media (max-width: 781px) {
	.wp-block-columns { flex-direction: column; }
	.wp-block-column { flex-basis: 100% !important; }
}

.wp-block-columns.are-vertically-aligned-center { align-items: center; }

/* Media & text (core block). */
.wp-block-media-text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4.5rem);
	margin-block: 2rem;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }

.wp-block-media-text__media { margin: 0; position: relative; }

.wp-block-media-text__content { padding: 0; }

@media (max-width: 781px) {
	.wp-block-media-text { grid-template-columns: 1fr; }
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
}

/* -------------------------------------------------------------------------
   Home page bands
   ------------------------------------------------------------------------- */
.zach-band {
	padding-block: var(--band);
}

.zach-band--panel { background: var(--paper-2); }

.zach-band > .zach-lead,
.zach-band > p { max-width: 40rem; }

.zach-hero {
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
	overflow: hidden;
}

.zach-hero .wp-block-columns { margin: 0; align-items: center; }

.zach-hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(3.4rem, 1.6rem + 7.4vw, 7rem);
	font-weight: 900;
	font-stretch: 122%;
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.zach-hero__title em,
.zach-hero__title .zach-pop {
	font-style: normal;
	color: var(--red);
}

.zach-hero__identity {
	display: inline-block;
	margin-bottom: 1.25rem;
	padding: 0.35rem 0.7rem;
	background: var(--yellow);
	font-family: var(--font-display);
	font-stretch: 108%;
	font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
	font-weight: 750;
	letter-spacing: 0.02em;
	color: var(--ink);
}

.zach-hero .zach-lead { max-width: 30rem; }

.zach-hero__image,
.zach-framed {
	margin: 0;
}

.zach-hero__image img,
.zach-framed img,
.zach-framed-media .wp-block-media-text__media img {
	width: 100%;
	border: 3px solid var(--ink);
	border-radius: 0;
}

.zach-feature--portrait .wp-block-media-text__media { max-width: 26rem; justify-self: center; }

/* What I Create: three offerings. */
.zach-offers.wp-block-columns { gap: clamp(1.25rem, 3vw, 2rem); margin-top: 2.5rem; }

.zach-offer {
	position: relative;
	padding: 1.75rem 1.5rem 1.25rem;
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
}

.zach-offer h3 { margin-top: 0; }

.zach-offer::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--dots-red);
	border: 2px solid var(--ink);
}

.zach-offer:nth-child(2)::before { background: var(--dots-blue); }
.zach-offer:nth-child(3)::before { background: radial-gradient(circle, var(--ink) 1.6px, transparent 1.9px) 0 0 / 9px 9px, var(--yellow); }

.zach-offer p:last-child { margin-bottom: 0; }

/* Closing invitation. */
.zach-cta {
	position: relative;
	padding-block: var(--band);
	background: var(--yellow);
	text-align: center;
	overflow: hidden;
}

.zach-cta::before,
.zach-cta::after {
	content: "";
	position: absolute;
	width: 16rem;
	height: 16rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 32, 47, 0.55) 2px, transparent 2.4px) 0 0 / 12px 12px;
	pointer-events: none;
}

.zach-cta::before { left: -5rem; top: -6rem; }
.zach-cta::after { right: -5rem; bottom: -7rem; }

.zach-cta h2 {
	position: relative;
	z-index: 1;
	font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
	padding: 0;
}

.zach-cta h2::after { content: none; }

.zach-cta p { position: relative; z-index: 1; }

.zach-cta .wp-block-buttons { justify-content: center; position: relative; z-index: 1; }

.zach-cta a:not(.wp-block-button__link) { color: var(--ink); }

/* -------------------------------------------------------------------------
   Artwork cards
   ------------------------------------------------------------------------- */
.zach-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.zach-grid--selected { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

.zach-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	scroll-margin-top: 7rem;
}

.zach-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--paper-3);
	border-radius: var(--radius);
}

.zach-card__media a { display: block; height: 100%; }

.zach-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.zach-card--full .zach-card__media { background: var(--paper-2); }

.zach-card--full .zach-card__media img { object-fit: contain; }

.zach-card__media a:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.zach-card__media img { transition: none; }
	.zach-card__media a:hover img { transform: none; }
}

.zach-card__body { padding-top: 0.9rem; }

.zach-card__title {
	margin: 0 0 0.3rem;
	font-size: 1.25rem;
	font-stretch: 108%;
	line-height: 1.15;
}

.zach-card__title a { color: var(--ink); text-decoration-color: var(--red); }

.zach-card__title a::after {
	content: " →";
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--red);
}

.zach-card__meta,
.zach-card__credit {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ink-2);
}

.zach-card__credit { font-style: italic; }

.zach-card__more { display: none; }

.zach-card:target .zach-card__media { outline: 4px solid var(--yellow); outline-offset: 4px; }

/* Portfolio filter and sections. */
.zach-portfolio { margin-top: 1rem; }

.zach-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1rem;
	padding: 1rem 0;
	border-block: 1px solid var(--line);
}

.zach-filter[hidden] { display: none; }

.zach-filter__button {
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font: 700 1rem/1.2 var(--font-body);
	cursor: pointer;
}

.zach-filter__button:hover { background: var(--paper-2); }

.zach-filter__button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--paper);
}

.zach-portfolio__section { padding-top: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 6rem; }

.zach-portfolio__section[hidden] { display: none; }

.zach-portfolio__intro { max-width: 44rem; }

.zach-portfolio__intro h2 { margin-top: 0; }

.zach-portfolio__intro p { color: var(--ink-2); }

/* -------------------------------------------------------------------------
   Blog cards and carousel
   ------------------------------------------------------------------------- */
.zach-posts { margin-top: 0; }

.zach-posts__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.zach-posts__header h2 { margin: 0; }

.zach-carousel__controls { display: flex; gap: 0.6rem; }

.zach-carousel__controls[hidden] { display: none; }

.zach-carousel__button {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	font: 700 1.25rem/1 var(--font-body);
	cursor: pointer;
}

.zach-carousel__button:hover:not([aria-disabled="true"]) { background: var(--yellow); }

.zach-carousel__button[aria-disabled="true"] { opacity: 0.35; cursor: default; }

.zach-posts__track {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.zach-posts--carousel .zach-posts__track {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * clamp(1.25rem, 2.5vw, 2rem)) / 3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
	padding: 4px 4px 1.25rem;
	margin-inline: -4px;
}

@media (max-width: 1023px) {
	.zach-posts--carousel .zach-posts__track { grid-auto-columns: calc((100% - clamp(1.25rem, 2.5vw, 2rem)) / 2); }
}

@media (max-width: 639px) {
	.zach-posts--carousel .zach-posts__track { grid-auto-columns: 86%; }
}

@media (prefers-reduced-motion: no-preference) {
	.zach-posts--carousel .zach-posts__track { scroll-behavior: smooth; }
}

.zach-posts__item { scroll-snap-align: start; margin: 0; min-width: 0; }

.zach-posts__all { margin-top: 1.5rem; }

.zach-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	overflow: hidden;
}

.zach-band--panel .zach-post-card { background: var(--paper); }

.zach-post-card__media {
	aspect-ratio: 16 / 10;
	background: var(--paper-3);
	border-bottom: 2px solid var(--ink);
	overflow: hidden;
}

.zach-post-card__media img { width: 100%; height: 100%; object-fit: cover; }

.zach-post-card--no-image .zach-post-card__media {
	background: radial-gradient(circle, rgba(200, 32, 47, 0.3) 2px, transparent 2.4px) 0 0 / 12px 12px, var(--paper-2);
}

.zach-posts__item:nth-child(3n+2) .zach-post-card--no-image .zach-post-card__media {
	background: radial-gradient(circle, rgba(31, 79, 191, 0.28) 2px, transparent 2.4px) 0 0 / 12px 12px, var(--paper-2);
}

.zach-dots { display: block; width: 100%; height: 100%; }

.zach-post-card__body { display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.4rem; flex: 1; }

.zach-post-card__title { margin: 0 0 0.4rem; font-size: 1.3rem; font-stretch: 106%; line-height: 1.15; }

.zach-post-card__title a { color: var(--ink); text-decoration: none; }

/* Whole card is clickable through the title link. */
.zach-post-card__title a::before { content: ""; position: absolute; inset: 0; }

.zach-post-card:hover .zach-post-card__title a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 0.1em; }

.zach-post-card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }

.zach-post-card__title a:focus-visible { outline: none; }

.zach-post-card__date { margin: 0 0 0.75rem; font-size: 0.9375rem; color: var(--ink-2); }

.zach-post-card__excerpt { margin: 0; font-size: 1rem; }

/* Blog listing. */
.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

.post-list > li { margin: 0; }

.pagination,
.navigation.pagination { margin-bottom: var(--band); }

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.nav-links .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.nav-links .page-numbers.current { background: var(--ink); color: var(--paper); }

.nav-links a.page-numbers:hover { background: var(--yellow); }

.nav-links .dots { border: 0; }

.empty-state { padding-bottom: var(--band); }

/* -------------------------------------------------------------------------
   Posts and projects
   ------------------------------------------------------------------------- */
.prose { font-size: 1.1875rem; }

.prose img { height: auto; }

.prose .wp-caption,
.prose figure { margin-block: 2rem; }

.prose .alignleft { float: left; margin: 0.4rem 1.5rem 1rem 0; max-width: 50%; }
.prose .alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; max-width: 50%; }
.prose .aligncenter { margin-inline: auto; }

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

.post-hero,
.project__hero {
	width: min(100% - 2 * var(--gutter), 70rem);
	margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.post-hero img { width: 100%; border-radius: var(--radius); }

.project__hero img {
	width: auto;
	max-width: 100%;
	max-height: 85vh;
	margin-inline: auto;
	border: 3px solid var(--ink);
}

.project__hero figcaption { text-align: center; }

.project__body {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 46rem);
	justify-content: center;
	gap: clamp(2rem, 5vw, 4rem);
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin-inline: auto;
}

.project__story { padding: 0; }

@media (max-width: 860px) {
	.project__body { grid-template-columns: 1fr; }
}

.project__details {
	display: grid;
	gap: 1rem;
	align-content: start;
	margin: 0;
	padding: 1.25rem;
	background: var(--paper-2);
	border-left: 6px solid var(--red);
}

.project__details dt {
	font-family: var(--font-display);
	font-stretch: 110%;
	font-size: 0.8125rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-2);
}

.project__details dd { margin: 0.15rem 0 0; font-weight: 700; }

.project__gallery {
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin: clamp(3rem, 6vw, 5rem) auto 0;
}

.project__gallery-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 1.5rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.project__gallery-list figure { margin: 0; }

.project__gallery-list img { width: 100%; border-radius: var(--radius); }

.post-tags { width: min(100% - 2 * var(--gutter), var(--content)); margin: -2rem auto 2rem; }

.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.3rem 0.8rem;
	border-radius: 999px;
	background: var(--paper-2);
	color: var(--ink);
	font-size: 0.9375rem;
	text-decoration: none;
}

.tag-list a:hover { background: var(--yellow); }

.post-nav {
	width: min(100% - 2 * var(--gutter), var(--content));
	margin: 0 auto var(--band);
	padding-top: 2rem;
	border-top: 2px solid var(--ink);
}

.post-nav--project {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin-top: clamp(3rem, 6vw, 5rem);
}

.post-nav--project p { margin: 0; }

.post-nav__links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.post-nav__next { text-align: right; grid-column: 2; }

.post-nav__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-2);
}

@media (max-width: 600px) {
	.post-nav__links { grid-template-columns: 1fr; }
	.post-nav__next { grid-column: 1; text-align: left; }
}

/* Comments. */
.comments {
	width: min(100% - 2 * var(--gutter), var(--content));
	margin: 0 auto 3rem;
}

.comments__title { font-size: 1.6rem; }

.comment-list { margin: 1.5rem 0 2.5rem; padding: 0; list-style: none; }

.comment { margin: 0 0 1.25rem; }

.comment__body { padding: 1.25rem; background: var(--paper-2); border-radius: var(--radius); }

.comment__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }

.comment__author { margin: 0; font-weight: 700; }

.comment__date { margin: 0; font-size: 0.9375rem; }

.comment__date a { color: var(--ink-2); }

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

.comment-form label { display: block; font-weight: 700; margin-bottom: 0.3rem; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
select,
textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.8rem;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
	font: 1.0625rem/1.4 var(--font-body);
}

textarea { min-height: 10rem; resize: vertical; }

select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

[aria-invalid="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }

.zach-inquiry { scroll-margin-top: 6rem; }

.zach-form {
	padding: clamp(1.25rem, 4vw, 2.5rem);
	background: var(--paper-2);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
}

.zach-form__note { font-size: 0.9375rem; color: var(--ink-2); }

.zach-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.4rem 1.5rem;
	margin-bottom: 1.75rem;
}

@media (max-width: 640px) {
	.zach-form__grid { grid-template-columns: 1fr; }
}

.zach-field { display: flex; flex-direction: column; }

.zach-field--wide { grid-column: 1 / -1; }

.zach-field label { font-weight: 700; margin-bottom: 0.35rem; }

.zach-required { color: var(--red); }

.zach-optional { font-weight: 400; color: var(--ink-2); }

.zach-field__help { margin: -0.1rem 0 0.45rem; font-size: 0.9375rem; color: var(--ink-2); }

.zach-field__error {
	order: 0;
	margin: 0 0 0.4rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--red-dark);
}

.zach-field__error::before { content: "! "; }

.zach-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.zach-notice {
	margin-bottom: 1.75rem;
	padding: 1.25rem 1.5rem;
	border: 2px solid var(--ink);
	border-left-width: 10px;
	border-radius: var(--radius);
	background: var(--paper);
}

.zach-notice:focus { outline: 3px solid var(--focus); outline-offset: 3px; }

.zach-notice h2 { font-size: 1.4rem; margin: 0 0 0.5rem; padding: 0; }

.zach-notice h2::after { content: none; }

.zach-notice p:last-child,
.zach-notice ul:last-child { margin-bottom: 0; }

.zach-notice--success { border-left-color: #237A3B; }

.zach-notice--error { border-left-color: var(--red); }

/* -------------------------------------------------------------------------
   Inner page components
   ------------------------------------------------------------------------- */
.zach-split.wp-block-columns { align-items: flex-start; }

.zach-card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0 !important;
	list-style: none;
}

.zach-card-list > li {
	margin: 0;
	padding: 1.1rem 1.25rem;
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
}

.zach-band--panel .zach-card-list > li { background: var(--paper); }

.zach-card-list > li strong { display: block; font-family: var(--font-display); font-stretch: 106%; font-size: 1.1rem; line-height: 1.2; margin-bottom: 0.3rem; }

.zach-timeline {
	margin: 1.5rem 0 0;
	padding: 0 !important;
	list-style: none;
	border-left: 3px solid var(--ink);
}

.zach-timeline > li {
	position: relative;
	margin: 0;
	padding: 0 0 1.4rem 1.6rem;
}

.zach-timeline > li::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 0.35rem;
	width: 17px;
	height: 17px;
	border: 3px solid var(--ink);
	border-radius: 50%;
	background: var(--yellow);
}

.zach-timeline > li strong { font-family: var(--font-display); font-stretch: 110%; font-size: 1.05rem; margin-right: 0.35rem; }

.zach-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0 !important;
	list-style: none;
}

.zach-tags > li {
	margin: 0;
	padding: 0.35rem 0.85rem;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);
	font-size: 0.9375rem;
	font-weight: 700;
}

.zach-press {
	margin: 1.25rem 0 0;
	padding: 0 !important;
	list-style: none;
	border-top: 1px solid var(--line);
}

.zach-press > li {
	margin: 0;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
}

.zach-press a { font-weight: 700; }

.zach-press span { display: block; font-size: 0.9375rem; color: var(--ink-2); }

/* Resume. */
.zach-resume-role {
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.zach-resume-role h3 { margin: 0 0 0.25rem; }

.zach-resume-role + ul,
.zach-resume-role ~ ul { margin-top: 0.75rem; }

.zach-resume-dates {
	margin: 0;
	font-weight: 700;
	color: var(--ink-2);
}

.link-list { padding-left: 1.25em; margin-bottom: var(--band); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
	position: relative;
	background: var(--ink);
	color: var(--paper);
}

.site-footer::before {
	content: "";
	display: block;
	height: 14px;
	background: radial-gradient(circle, var(--red) 2px, transparent 2.4px) 0 0 / 10px 10px, var(--yellow);
}

.site-footer a { color: var(--paper); text-decoration-color: rgba(255, 250, 241, 0.5); }

.site-footer a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }

.site-footer :focus-visible { outline-color: var(--yellow); }

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 2.5rem;
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin-inline: auto;
	padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}

@media (max-width: 800px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
	.site-footer__id { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
	.site-footer__inner { grid-template-columns: 1fr; }
}

.site-footer__name {
	margin: 0 0 0.35rem;
	font-family: var(--font-display);
	font-stretch: 118%;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 900;
	line-height: 1.1;
}

.site-footer__place { margin: 0; color: #E6DCCB; }

.site-footer__heading {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #E6DCCB;
}

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

.site-footer__list li { margin: 0; }

.site-footer__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 44px;
	font-weight: 700;
}

.site-footer__handle { font-weight: 400; color: #E6DCCB; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin-inline: auto;
	padding-block: 1.25rem 2rem;
	border-top: 1px solid rgba(255, 250, 241, 0.2);
	font-size: 0.9375rem;
	color: #E6DCCB;
}

.site-footer__bottom p { margin: 0; }

/* -------------------------------------------------------------------------
   Print
   ------------------------------------------------------------------------- */
@media print {
	.site-header,
	.site-footer,
	.zach-carousel__controls,
	.zach-filter,
	.skip-link { display: none !important; }
	body { background: #fff; }
	.zach-portfolio__section[hidden] { display: block !important; }
}

/* A closing invitation band sits flush against the footer. */
.entry-content:has(> .zach-cta:last-child) { padding-bottom: 0; }

/* Wide banner photo at the top of a page: a purposeful crop, not a wall of image. */
.zach-banner img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: var(--radius);
}

@media (max-width: 640px) {
	.zach-banner img { aspect-ratio: 4 / 3; }
}

/* Card lists run the full wide measure so three items sit in a row. */
.entry-content > .zach-card-list { max-width: var(--wide); }

/* Text and photo side by side inside a page section. */
.zach-section-feature { margin-block: clamp(3rem, 6vw, 5rem) 1.5rem; }

.zach-section-feature .wp-block-media-text__media img { width: 100%; border-radius: var(--radius); }

/* Space above the closing invitation on inner pages. */
.entry-content:not(.entry-content--home) > .zach-cta { margin-top: var(--band) !important; }

.zach-inquiry { margin-bottom: 2rem; }

/* Comments, tags and post navigation line up with the article text. */
.comments,
.post-tags,
.post-nav:not(.post-nav--project) {
	width: min(100% - 2 * var(--gutter), var(--content));
	margin-left: max(var(--gutter), calc((100% - var(--wide)) / 2));
	margin-right: auto;
}

/* Core adds side padding to stacked media & text; keep text aligned with the image. */
.wp-block-media-text > .wp-block-media-text__content,
.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { padding: 0; }

@media (max-width: 640px) {
	.zach-cta::before,
	.zach-cta::after { width: 9rem; height: 9rem; }
	.zach-cta::before { left: -5rem; top: -5rem; }
	.zach-cta::after { right: -5rem; bottom: -5rem; }
}

/* -------------------------------------------------------------------------
   Photo viewer (modal dialog)
   ------------------------------------------------------------------------- */
.zach-viewer-open body {
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

.zach-card__zoom,
.zach-lightbox-link { cursor: zoom-in; }

.zach-viewer {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: clamp(3.5rem, 6vw, 4.5rem) clamp(0.75rem, 5vw, 5.5rem) 1rem;
	border: 0;
	background: transparent;
	color: var(--paper);
	overflow: hidden;
}

.zach-viewer[open] {
	display: grid;
	place-items: center;
}

.zach-viewer::backdrop { background: rgba(20, 18, 16, 0.96); }

.zach-viewer.is-animated[open] { animation: zach-viewer-in 0.18s ease-out; }

@keyframes zach-viewer-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.zach-viewer__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.zach-viewer__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100dvh - 10rem);
	object-fit: contain;
	background: #2a2723;
	border: 3px solid var(--paper);
	transition: opacity 0.15s ease;
}

.zach-viewer.is-loading .zach-viewer__img { opacity: 0.35; }

.zach-viewer__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.25rem 1rem;
	max-width: 46rem;
	margin: 0;
	text-align: center;
	font-size: 1rem;
	color: var(--paper);
}

.zach-viewer__title { font-weight: 700; }

.zach-viewer__counter { color: #E6DCCB; }

.zach-viewer__story { min-height: 0; color: var(--yellow); text-decoration-color: var(--yellow); }

.zach-viewer__story:hover { color: #fff; }

.zach-viewer__story[hidden],
.zach-viewer__nav[hidden] { display: none; }

.zach-viewer__close,
.zach-viewer__nav {
	position: fixed;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--paper);
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	font: 700 1.4rem/1 var(--font-body);
	cursor: pointer;
}

.zach-viewer__close:hover,
.zach-viewer__nav:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

.zach-viewer :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.zach-viewer__close { top: 0.75rem; right: 0.75rem; }

.zach-viewer__nav { top: 50%; transform: translateY(-50%); }

.zach-viewer__nav--prev { left: 0.75rem; }

.zach-viewer__nav--next { right: 0.75rem; }

@media (max-width: 640px) {
	.zach-viewer { padding-inline: 0.5rem; padding-bottom: 4.5rem; }
	.zach-viewer__nav { top: auto; bottom: 0.75rem; transform: none; }
	.zach-viewer__nav--prev { left: calc(50% - 56px); }
	.zach-viewer__nav--next { right: calc(50% - 56px); }
	.zach-viewer__img { max-height: calc(100dvh - 12rem); }
}

@media (prefers-reduced-motion: reduce) {
	.zach-viewer__img { transition: none; }
}