/*
 * Base styles: the parts of the design tokens theme.json can't express.
 * Tokens themselves (colors, sizes, widths) live in theme.json and arrive as
 * --wp--preset--* and --wp--custom--* custom properties.
 *
 * Breakpoint: the design is drawn at 1280px (desktop) and 390px (mobile).
 * Everything at or below 767px takes the mobile values.
 */

/* Footer fills to the bottom of the window (spec, Footer): the wrapper is a column and the footer grows. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > footer {
	flex: 1 0 auto;
}

img {
	max-width: 100%;
	height: auto;
}

/*
 * Section circles: a white glyph on the section's color (--pm-section, set
 * inline). Used by the header, footer and title rows, which each set the size.
 */
.pm-dot {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pm-section);
}

.pm-dot svg {
	display: block;
	width: 56%;
	height: 56%;
}

/*
 * Pill buttons (spec, "Buttons"): 2px border, weight 600. Padding is 2px less
 * than the reference's borderless primary, so both kinds end up its size.
 *   primary   ink fill, white text
 *   secondary ink outline, transparent
 *   quiet     line-colored outline (less important nav, like First and Latest)
 */
.pm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 10px 18px;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	background: transparent;
}

.pm-button--primary {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--ink);
}

.pm-button--primary:hover {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--ink-hover);
	background: var(--wp--preset--color--ink-hover);
}

.pm-button--secondary:hover {
	color: var(--wp--preset--color--ink-hover);
	border-color: var(--wp--preset--color--ink-hover);
}

.pm-button--quiet {
	border-color: var(--wp--preset--color--line);
}

/* Illustration tiles (spec, "Illustration tiles"): square, 1px line outline, 6px radius. */
.pm-tile {
	display: block;
	text-decoration: none;
}

.pm-tile img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--tile);
}

/* Hover: the image lifts onto a hard ink shadow, like the Home series cards. */
.pm-tile img {
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.pm-tile:is(:hover, :focus-visible) img {
	transform: translate(-3px, -3px);
	border-color: var(--wp--preset--color--ink);
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
}

@media (prefers-reduced-motion: reduce) {
	.pm-tile img {
		transition: none;
	}
}

/* Image placeholders, e.g. "[Photo]" or "Cover": Porter's art goes here later. */
.pm-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-2);
	background: var(--wp--preset--color--placeholder);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--tile);
}

.pm-placeholder > p {
	margin: 0;
}

/* "See all … →" and "More about me →": the phone stand-ins for the title rows' links. */
.pm-more-link,
.pm-more-link a {
	display: inline-block;
	padding: 6px 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
}

.pm-mobile-only {
	display: none;
}

/*
 * Home (front-page.html). The home page's content indent is 160px, not 82px
 * (home.html). Sections are 88px apart; content sits 28px under its heading.
 */
/*
 * Home's wrapper is border-box in the reference (unlike interior pages), so its
 * content is 1136px wide (1200 minus the 32px padding each side), starting 32px
 * further in. Constrained layouts read this variable for their children's width.
 */
.pm-home {
	--wp--style--global--content-size: 1136px;
	padding-top: 56px;
}

.pm-home .pm-title-row--section:not(:first-child) {
	margin-top: 88px;
}

.pm-home .pm-title-row--section + * {
	margin-top: 28px;
}

.pm-home-about {
	display: flex;
	align-items: center;
	gap: 32px;
}

.pm-home-about__photo {
	flex: 0 0 180px;
	height: 220px;
}

.pm-home-about__text {
	max-width: 640px;
	margin: 0;
	font-size: 22px;
	line-height: 1.55;
}

.home .wp-site-blocks > footer {
	margin-top: 96px;
}

/* Chips: small toggle pills, filled when chosen (version chips, the comic reader's Panels / Full page). */
.pm-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

.pm-chip[aria-pressed="true"] {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--ink);
}

.pm-chip:hover:not([aria-pressed="true"]) {
	color: var(--wp--preset--color--ink-hover);
	border-color: var(--wp--preset--color--ink-hover);
}

/* Template parts sit flush: each page sets its own spacing below the header and above the footer. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/*
 * Body content lines up with the start of the title text: 64px icon circle + 18px gap.
 * Border-box, so the indent comes out of the 1200px column instead of widening it
 * (WordPress only makes its own groups border-box). The intro opts back out.
 */
.pm-indent {
	box-sizing: border-box;
	padding-left: var(--wp--custom--layout--indent);
}

/*
 * The sticky header's height (logo 44 + 8px padding top and bottom + 2px
 * border). Anchors such as /#comics land 24px below it (and the admin bar).
 */
:root {
	--pm-sticky-h: 62px;
	scroll-padding-top: calc(var(--pm-sticky-h) + 24px + var(--wp-admin--admin-bar--height, 0px));
}

.pm-home-indent {
	box-sizing: border-box;
	padding-left: var(--wp--custom--layout--home-indent);
}

/* Intro paragraph (spec, Type). 16px on mobile, from the mobile reference; the spec only gives desktop. */
/*
 * The intro spans the content column like every other block (so WordPress
 * centers it with the rest at any width), and its text stops at 640px by
 * padding the right instead of narrowing the box. At 1280: text starts at the
 * 82px indent and wraps at 640px, as in the reference.
 */
.pm-intro {
	box-sizing: border-box;
	padding-right: max(0px, calc(min(100%, var(--wp--style--global--content-size)) - var(--wp--custom--layout--indent) - 640px));
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.5;
	color: var(--wp--preset--color--text-2);
}

/*
 * Page head: breadcrumb, title row, intro. Spacing from the reference pages;
 * landing pages (no breadcrumb) start the title row lower.
 */
:is(.pm-main, .pm-main > .wp-block-post-content) > .pm-breadcrumb {
	padding-top: 44px;
}

:is(.pm-main, .pm-main > .wp-block-post-content) > :is(.pm-title-row--page, .pm-title-row--single) {
	padding-top: 8px;
	padding-bottom: 12px;
}

:is(.pm-main, .pm-main > .wp-block-post-content) > :is(.pm-title-row--page, .pm-title-row--single):first-child {
	padding-top: 56px;
}

:is(.pm-main, .pm-main > .wp-block-post-content) > .pm-intro {
	margin-top: 8px;
	margin-bottom: 28px;
}

.pm-intro > p {
	margin: 0;
}

/*
 * Single illustration (illustration-single.html): two columns, image 1.4fr and
 * details 1fr, 44px apart; then previous/next 64px below and More like this.
 */
.pm-single :is(.pm-main, .pm-main > .wp-block-post-content) > .pm-title-row--single,
.pm-main.pm-single > .pm-title-row--single {
	padding-bottom: 32px;
}

.pm-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
	gap: 44px;
}

.pm-single__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pm-single__aside > * {
	margin: 0;
}

/*
 * Desktop: the aside runs the full height of the image column and its last
 * box (the commission CTA) sits at the bottom, level with the bottom of the
 * image. The version chips under the image take 52px (14px gap + a 38px chip
 * row; illustration-viewer/style.css), so the aside stops that much short when
 * they're showing. If the aside's content is taller than the image, it just
 * flows. Phones stack everything (below).
 */
@media (min-width: 768px) {
	.pm-single__layout > .pm-single__aside {
		align-self: stretch;
	}

	.pm-js .pm-single__layout:has(.pm-viewer__chips) > .pm-single__aside {
		padding-bottom: 52px;
	}

	.pm-single__aside > .pm-cta:last-child {
		margin-top: auto;
	}
}

.pm-main > .pm-single__nav {
	margin-top: 64px;
}

.pm-main > .pm-single__related {
	padding-top: 40px;
}

/* A landing page with a breadcrumb (e.g. Odds and Ends): the title sits 8px under it, not the landing 56px. */
.pm-main > .pm-breadcrumb + .wp-block-post-content > :is(.pm-title-row--page, .pm-title-row--single):first-child {
	padding-top: 8px;
}

/* A section label inside a page, e.g. "Series" on the Illustration landing (28px, like "More like this"). */
.pm-subheading {
	margin: 40px 0 20px;
	font-size: 28px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.02em;
}

/* Comic reader: 28px under the title row (strip-reader.html). */
.pm-main.pm-comic > .pm-title-row--single {
	padding-bottom: 28px;
}

/*
 * About (wireframe about.html in the design system): a photo beside the bio,
 * 56px apart, the bio max 640px with a slightly larger lead, then the Say hello
 * CTA filling the text column.
 */
.pm-about {
	display: flex;
	align-items: flex-start;
	gap: 56px;
	margin-top: 24px;
}

.pm-about__photos {
	display: flex;
	flex: 0 1 300px;
	flex-direction: column;
	gap: 24px;
}

.pm-about__photo {
	height: 340px;
}

/* Desktop shows the tall photo at its own proportions; phones get the head shot. */
.pm-about__photo--tall {
	height: auto;
}

.pm-about__photo--tall img {
	height: auto;
}

.pm-about__photo--phone {
	display: none;
}

/* The real photos (core/image blocks) fill their slots, cropped to fit. */
.pm-home-about__photo,
.pm-about__photo {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--tile);
}

.pm-home-about__photo img,
.pm-about__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pm-about__text {
	flex: 1 1 420px;
	min-width: 0;
	max-width: 640px;
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.65;
}

.pm-about__text > p {
	margin: 0 0 18px;
}

.pm-about__text > p:last-of-type {
	margin-bottom: 0;
}

.pm-about__lead {
	font-size: 19px;
}

.pm-about__text > .pm-cta {
	max-width: none;
	margin: 36px 0 0;
}

/* The email line under the Patreon CTA: the quieter way to get in touch. */
.pm-about__text > .pm-about__contact {
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-2);
}

/* Visible focus for keyboard users everywhere, including the colored nav circles. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 767px) {
	:root {
		--wp--custom--layout--gutter: 16px;
	}

	.pm-indent,
	.pm-home-indent {
		padding-left: 0;
	}

	.pm-intro {
		font-size: var(--wp--preset--font-size--body);
	}

	.pm-mobile-only {
		display: revert;
	}

	.pm-desktop-only {
		display: none;
	}

	.pm-home {
		padding-top: 32px;
	}

	.pm-home .pm-title-row--section:not(:first-child) {
		margin-top: 48px;
	}

	.pm-home .pm-title-row--section + * {
		margin-top: 18px;
	}

	/* Phones: no photo, a smaller bio, then "More about me →". */
	.pm-home-about {
		display: block;
	}

	.pm-home-about__photo {
		display: none;
	}

	.pm-home .pm-title-row--section + .pm-home-about {
		margin-top: 16px;
	}

	.pm-home-about__text {
		font-size: var(--wp--preset--font-size--body-large);
	}

	.pm-home-about + .pm-more-link {
		margin-top: 8px;
	}

	.home .wp-site-blocks > footer {
		margin-top: 48px;
	}

	.pm-main.pm-comic > .pm-title-row--single {
		padding-bottom: 16px;
	}

	/* The mobile readers keep "Strip 12 of N" under the title (mobile wireframes). */
	.pm-main.pm-comic > .pm-title-row--single .pm-title-row__meta {
		display: block;
		top: 0;
		margin-top: 8px;
		white-space: normal;
	}

	/* About on phones (mobile-about.html): photo on top, full width. */
	.pm-about {
		display: block;
		margin-top: 18px;
	}

	.pm-about__photos {
		display: block;
	}

	.pm-about__photo {
		height: 300px;
		margin-bottom: 22px;
	}

	.pm-about__photo img {
		object-position: center 20%;
	}

	.pm-about__photo--tall {
		display: none;
	}

	/* The Home head shot, uncropped: a wide slot cuts off the chin. */
	.pm-about__photo--phone {
		display: block;
		width: 220px;
		height: auto;
	}

	.pm-about__photo--phone img {
		height: auto;
	}

	.pm-about__text {
		font-size: var(--wp--preset--font-size--body);
	}

	.pm-about__text > p {
		margin-bottom: 16px;
	}

	.pm-about__lead {
		font-size: var(--wp--preset--font-size--body-large);
	}

	.pm-about__text > .pm-cta {
		margin-top: 32px;
	}

	/*
	 * Single illustration on phones: one column, image first (mobile wireframe).
	 * The title's 24px matches the gap under the image. The extra class
	 * outweighs the phone page-head rule below (padding: 2px 0 0), which won before.
	 */
	.pm-main.pm-single > .pm-title-row.pm-title-row--single {
		padding-bottom: 24px;
	}

	.pm-single__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.pm-main > .pm-single__nav {
		margin-top: 40px;
	}

	.pm-main > .pm-single__related {
		padding-top: 28px;
	}

	:is(.pm-main, .pm-main > .wp-block-post-content) > .pm-breadcrumb {
		padding-top: 20px;
	}

	:is(.pm-main, .pm-main > .wp-block-post-content) > :is(.pm-title-row--page, .pm-title-row--single) {
		padding: 2px 0 0;
	}

	.pm-main > .pm-breadcrumb + .wp-block-post-content > :is(.pm-title-row--page, .pm-title-row--single):first-child {
		padding-top: 2px;
	}

	/* Landing pages on phones: no reference, so a little under the breadcrumb pages' rhythm. */
	:is(.pm-main, .pm-main > .wp-block-post-content) > :is(.pm-title-row--page, .pm-title-row--single):first-child {
		padding-top: 28px;
	}

	:is(.pm-main, .pm-main > .wp-block-post-content) > .pm-intro {
		margin-top: 12px;
		margin-bottom: 18px;
	}

	h1,
	.wp-block-post-title:is(h1) {
		font-size: var(--wp--preset--font-size--title-mobile);
	}

	h2 {
		font-size: var(--wp--preset--font-size--section-mobile);
	}

	h3 {
		font-size: var(--wp--preset--font-size--cta-mobile);
	}
}

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

/* 404 (templates/404.html): heading and one line, then Home's sections. */
.pm-404 .wp-block-post-title {
	margin-bottom: 12px;
}

.pm-404__intro {
	margin: 0 0 56px;
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.4;
}

@media (max-width: 767px) {
	.pm-404__intro {
		margin-bottom: 36px;
		font-size: var(--wp--preset--font-size--body-large);
	}
}