/*
Theme Name: anekola
Theme URI: https://anekola.com/
Author: Adam Nekola
Author URI: https://anekola.com/
Description: Block theme for anekola.com, built from the anekola.com Design System: Fraunces display type over Public Sans, a warm paper ground, square corners, hairline dividers and no shadows. Post and page bodies use core blocks, with block styles for the lede, pull quotes, callouts, section breaks and badges.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anekola
*/

/* ==========================================================================
   Base
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

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

/* Blocks inside the main column sit flush; spacing comes from templates. */
body .wp-site-blocks > * {
	margin-block-start: 0;
}

.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   Atoms
   ========================================================================== */

/* Eyebrow / label: small uppercase text above headings. */
.is-style-eyebrow,
.an-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.an-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

/* Heading styled as a small uppercase section label ("More posts", "Keep reading"). */
h1.is-style-label,
h2.is-style-label,
h3.is-style-label,
h4.is-style-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/* Badge: inline format for an award or recognition, e.g. in the career timeline. */
.an-badge {
	display: inline-block;
	padding: 5px 10px;
	margin-block: 2px;
	background: var(--wp--preset--color--orange-soft);
	color: var(--wp--preset--color--on-orange);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

/* Standalone links get a typographic arrow. */
.is-style-arrow a::after,
a.an-arrow::after {
	content: " →";
}

.is-style-arrow a,
a.an-arrow {
	font-weight: 500;
	text-decoration: none;
}

/* Buttons: primary (default, orange), secondary (slate fill), outline (slate border). */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-decoration: none;
}

.wp-block-button.is-style-secondary .wp-block-button__link {
	background: var(--wp--preset--color--slate-fill);
	border-color: var(--wp--preset--color--slate-fill);
	color: var(--wp--preset--color--on-slate);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-slate);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--slate);
	color: var(--wp--preset--color--slate);
	padding: 12px 20px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--slate-fill);
	border-color: var(--wp--preset--color--slate-fill);
	color: var(--wp--preset--color--on-slate);
}

/* Large buttons for heroes and closing bands (Buttons block > Button, "an-btn-lg" class or the L size). */
.wp-block-button.an-btn-lg .wp-block-button__link,
.wp-block-buttons.an-btn-lg .wp-block-button__link {
	padding: 16px 28px;
	font-size: 14px;
}

.wp-block-button.is-style-outline.an-btn-lg .wp-block-button__link,
.wp-block-buttons.an-btn-lg .is-style-outline .wp-block-button__link {
	padding: 14px 26px;
}

/* Read more block, rendered as a secondary button. */
.wp-block-read-more.an-btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	padding: 12px 22px;
	background: var(--wp--preset--color--slate-fill);
	color: var(--wp--preset--color--on-slate);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	width: fit-content;
}

.wp-block-read-more.an-btn:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-slate);
	text-decoration: none;
}

/* Chips: category filters and tags. */
.an-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.an-chip,
.wp-block-post-terms.is-style-chips a,
.wp-block-tag-cloud.is-style-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--line-strong);
	background: transparent;
	color: var(--wp--preset--color--ink-body);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px !important;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
}

.an-chip:hover,
.wp-block-post-terms.is-style-chips a:hover,
.wp-block-tag-cloud.is-style-chips a:hover {
	border-color: var(--wp--preset--color--slate);
	color: var(--wp--preset--color--slate);
	text-decoration: none;
}

.an-category-nav {
	margin-bottom: 56px;
}

.an-chip[aria-current="page"] {
	background: var(--wp--preset--color--slate-fill);
	border-color: var(--wp--preset--color--slate-fill);
	color: var(--wp--preset--color--on-slate);
}

.wp-block-post-terms.is-style-chips,
.wp-block-tag-cloud.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wp-block-post-terms.is-style-chips .wp-block-post-terms__separator {
	display: none;
}

/* Post terms used as category labels. */
.wp-block-post-terms a {
	text-decoration: none;
}

/* Avatar: round, the one exception to the square system. */
.wp-block-avatar img {
	border-radius: 50%;
	display: block;
}

/* Image placeholders for posts without a featured image. */
.an-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--wp--preset--color--placeholder);
	color: var(--wp--preset--color--ink-muted);
	font-size: 13px;
}

.an-placeholder--dark {
	background: var(--wp--preset--color--night-raised);
	color: var(--wp--preset--color--on-night-muted);
}

/* ==========================================================================
   Header
   ========================================================================== */

.an-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
}

.an-header__inner {
	min-height: 88px;
}

.an-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.an-brand:hover {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.an-brand img {
	display: block;
	width: 87px;
	height: 40px;
	flex-shrink: 0;
}

.an-brand__wordmark {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.an-header .wp-block-navigation {
	font-size: 15px;
}

.an-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.an-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.an-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--slate);
	font-weight: 600;
	border-bottom-color: var(--wp--preset--color--slate);
}

/* Mobile menu overlay. */
.an-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	padding: 24px 20px;
}

.an-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.an-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 8px;
}

.an-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 30px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.an-header .wp-block-navigation__responsive-container-open,
.an-header .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.an-footer {
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--on-night);
}

.an-footer a {
	color: var(--wp--preset--color--on-night);
	text-decoration: none;
	font-size: 15px;
}

.an-footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.an-footer .an-logo img {
	display: block;
	width: 87px;
	height: 40px;
}

.an-footer__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-night-muted);
}

.an-footer__links {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.an-footer__links p {
	margin: 0;
}

.an-footer__legal {
	border-top: 1px solid var(--wp--preset--color--night-line);
	padding-top: 24px;
	font-size: 13px;
	color: var(--wp--preset--color--on-night-muted);
}

/* ==========================================================================
   Archive: featured post, post list, post cards
   ========================================================================== */

/* Featured post: image left, body right, on surface. */
.an-featured {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--wp--preset--color--surface);
	gap: 0 !important;
}

.an-featured > * {
	margin: 0 !important;
}

.an-featured .wp-block-post-featured-image,
.an-featured .an-placeholder {
	height: 100%;
	min-height: 460px;
}

.an-featured .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
}

.an-featured__body {
	padding: 56px;
	justify-content: center;
}

.an-featured__body .wp-block-post-date {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.an-featured__body .wp-block-post-date::before {
	content: "Latest · ";
}

.an-featured .wp-block-post-title {
	font-size: var(--wp--preset--font-size--band);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.an-featured .wp-block-post-excerpt__excerpt {
	font-size: 17px;
	line-height: 1.7;
	margin: 0;
}

/* Archive rows: date | body | thumbnail. */
.an-post-list {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

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

.an-list-item {
	display: grid !important;
	grid-template-columns: 200px minmax(0, 1fr) 200px;
	gap: 48px !important;
	padding: 36px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	align-items: start;
}

.an-list-item > * {
	margin: 0 !important;
}

.an-list-item > .wp-block-post-date {
	padding-top: 4px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.an-list-item__body {
	gap: 10px !important;
}

.an-list-item__body > * {
	margin: 0 !important;
}

.an-list-item .wp-block-post-title {
	font-size: 26px;
	line-height: 1.3;
}

.an-list-item .wp-block-post-excerpt__excerpt {
	margin: 0;
	max-width: 680px;
	font-size: 16px;
	line-height: 1.7;
}

.an-list-item .wp-block-post-featured-image,
.an-list-item .an-placeholder {
	width: 200px;
	aspect-ratio: 3 / 2;
}

.an-list-item .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Post cards: image, meta, title. */
.an-card {
	gap: 14px !important;
}

.an-card > * {
	margin: 0 !important;
}

.an-card .wp-block-post-featured-image img,
.an-card .an-placeholder {
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
}

.an-card__meta {
	gap: 0 !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.an-card__meta > .wp-block-post-date + .wp-block-post-terms::before {
	content: "\00a0·\00a0";
	color: var(--wp--preset--color--ink-muted);
}

.an-card .wp-block-post-title {
	font-size: 22px;
	line-height: 1.3;
}

/* Pagination: "Older posts" as an outline button. */
.wp-block-query-pagination {
	align-items: center;
	padding: 40px 0 0;
}

.wp-block-query-pagination a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 12px 20px;
	border: 2px solid var(--wp--preset--color--slate);
	color: var(--wp--preset--color--slate);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--slate-fill);
	color: var(--wp--preset--color--on-slate);
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers {
	padding: 0 8px;
	font-size: 14px;
	border: 0;
	min-height: 0;
	letter-spacing: 0;
}

.wp-block-query-pagination-numbers a.page-numbers {
	color: var(--wp--preset--color--link);
}

/* Featured post categories sit in a row, no separators. */
.an-featured__body .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	letter-spacing: 0.06em;
}

.an-featured__body .wp-block-post-terms__separator {
	display: none;
}

/* Search form: square field and button. */
.wp-block-search.an-search {
	max-width: 560px;
}

.wp-block-search .wp-block-search__input {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 0;
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	color: var(--wp--preset--color--ink);
}

.wp-block-search .wp-block-search__button {
	margin-left: 8px;
}

/* ==========================================================================
   Single post
   ========================================================================== */

/* Post header: breadcrumb line, title, byline. */
.an-post-header {
	padding-top: 72px;
	padding-bottom: 56px;
}

.an-post-header > * + * {
	margin-block-start: 24px !important;
}

.an-crumbs {
	gap: 0 14px !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.an-crumbs > * {
	margin: 0 !important;
}

.an-back-link a {
	color: var(--wp--preset--color--slate);
	text-decoration: none;
}

.an-crumbs__sep {
	color: var(--wp--preset--color--on-night-muted);
	font-weight: 400;
}

.an-post-meta {
	gap: 12px !important;
	font-size: 15px;
	color: var(--wp--preset--color--ink-muted);
}

.an-post-meta > * {
	margin: 0 !important;
}

.an-post-meta .wp-block-post-author-name {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.an-post-meta > .wp-block-post-author-name + *::before,
.an-post-meta > .wp-block-post-date + *::before {
	content: "·";
	margin-right: 12px;
}

.an-lead-image {
	max-width: var(--wp--custom--lead-image);
	margin-inline: auto;
}

.an-lead-image img {
	width: 100%;
	aspect-ratio: 1120 / 600;
	object-fit: cover;
}

.an-lead-image .wp-element-caption {
	margin-top: 12px;
}

/* Author bio. */
.an-author {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 40px 0;
	gap: 24px !important;
}

.an-author .wp-block-post-author-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 21px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.an-author .wp-block-post-author-biography {
	font-size: 15px;
	line-height: 1.7;
}

.an-author__body {
	gap: 8px !important;
}

.an-author__body > * {
	margin: 0 !important;
}

.an-author__links {
	gap: 20px !important;
	font-size: 15px;
	font-weight: 500;
}

/* ==========================================================================
   Prose: blocks inside a post or page body
   ========================================================================== */

/* Extra room above section headings. */
:where(.wp-block-post-content, .is-root-container) > h2.wp-block-heading {
	margin-block-start: 40px;
	text-wrap: balance;
}

:where(.wp-block-post-content, .is-root-container) > h3.wp-block-heading {
	margin-block-start: 32px;
}

/* Links in body text are underlined. */
.wp-block-post-content :where(p, li, td, figcaption, cite) a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wp-block-post-content strong {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* Note, tip, warn and error paragraphs. Note and Warn use the
   palette's slate and orange; Tip and Error are muted to sit alongside them.
   Tints are mixed from the accent so they work on light and dark. */
p.is-style-note,
p.is-style-tip,
p.is-style-warn,
p.is-style-error {
	--hint: var(--wp--preset--color--slate);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 4px solid var(--hint);
	background: color-mix(in srgb, var(--hint) 14%, transparent);
}

p.is-style-tip {
	--hint: #3f7d5c;
}

p.is-style-warn {
	--hint: var(--wp--preset--color--orange);
}

p.is-style-error {
	--hint: #b4483c;
}

/* Consecutive hints stack with no gap. */
p:is(.is-style-note, .is-style-tip, .is-style-warn, .is-style-error)
	+ p:is(.is-style-note, .is-style-tip, .is-style-warn, .is-style-error) {
	margin-top: 0;
}

/* Lede: the first paragraph of a post. */
p.is-style-lede {
	font-size: var(--wp--preset--font-size--lede) !important;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Lists: orange square markers, Fraunces numerals. */
ul.wp-block-list,
ol.wp-block-list {
	padding-left: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

ul.wp-block-list {
	list-style: none;
}

ul.wp-block-list > li {
	position: relative;
}

ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 0.72em;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--orange);
}

/* ::marker keeps the start and reversed settings of the List block working. */
ol.wp-block-list {
	list-style: decimal;
	padding-left: 30px;
}

ol.wp-block-list > li {
	padding-left: 6px;
}

ol.wp-block-list > li::marker {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--wp--preset--color--orange-ink);
}

li > ul.wp-block-list,
li > ol.wp-block-list {
	margin-top: 10px;
	gap: 8px;
	font-size: 0.94em;
}

li > ul.wp-block-list > li::before {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--orange);
	box-sizing: border-box;
}

/* Blockquote (Quote block): the pull quote's voice, left-aligned, always cited. */
.wp-block-quote {
	margin-block: 30px;
	margin-left: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.wp-block-quote::before {
	content: "";
	display: block;
	width: 48px;
	border-top: 3px solid var(--wp--preset--color--orange);
}

.wp-block-quote > * {
	margin: 0 !important;
}

.wp-block-quote p {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.wp-block-quote cite {
	font-family: var(--wp--preset--font-family--sans);
	font-style: normal;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
}

.wp-block-quote cite::before {
	content: "— ";
}

/* Pull quote, variant D (default): centered between two orange rules. */
.wp-block-pullquote {
	margin-block: 40px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.wp-block-pullquote::before,
.wp-block-pullquote::after {
	content: "";
	display: block;
	width: 48px;
	border-top: 3px solid var(--wp--preset--color--orange);
}

.wp-block-pullquote blockquote {
	margin: 0;
	max-width: 560px;
}

.wp-block-pullquote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.wp-block-pullquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-style: normal;
	text-transform: none;
	color: var(--wp--preset--color--ink-muted);
}

/* Pull quote, variant B: margin pull-out beside the measure. Place it before its source paragraph. */
.wp-block-pullquote.is-style-margin {
	display: block;
	margin-block: 8px;
	padding-top: 18px !important;
	border-top: 3px solid var(--wp--preset--color--orange);
	text-align: left;
	font-size: var(--wp--preset--font-size--quote);
}

.wp-block-pullquote.is-style-margin::before,
.wp-block-pullquote.is-style-margin::after {
	content: none;
}

.wp-block-pullquote.is-style-margin blockquote {
	max-width: none;
}

@media (min-width: 1200px) {
	.wp-block-post-content > .wp-block-pullquote.is-style-margin {
		float: right;
		clear: right;
		position: relative;
		width: var(--wp--custom--margin-note);
		max-width: var(--wp--custom--margin-note) !important;
		margin: 6px calc((100% - var(--wp--style--global--content-size)) / 2 - var(--wp--custom--margin-note) - 40px) 0 0 !important;
	}

	.an-page-content > .wp-block-pullquote.is-style-margin {
		margin-right: calc(100% - var(--wp--style--global--content-size) - var(--wp--custom--margin-note) - 40px) !important;
	}
}

/* Inline code, keyboard keys. */
:where(p, li, td, th, h2, h3, h4, figcaption) code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.86em;
	background: var(--wp--preset--color--surface-sunk);
	color: var(--wp--preset--color--ink);
	padding: 0.12em 0.4em;
	white-space: nowrap;
}

:where(h2, h3, h4) code {
	font-size: 0.8em;
	font-weight: 400;
}

a code {
	color: inherit;
}

/* Long paths may break anywhere so they can't overflow the column. */
code.an-path {
	white-space: normal;
	overflow-wrap: anywhere;
}

kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8em;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	padding: 0.1em 0.45em;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-bottom-width: 2px;
	white-space: nowrap;
}

/* Code block and preformatted: night panel, scrolls sideways. */
.wp-block-code,
.wp-block-preformatted {
	margin-block: 32px 8px;
	white-space: pre;
	overflow-x: auto;
	tab-size: 2;
}

.wp-block-code code {
	background: transparent;
	padding: 0;
	font-size: inherit;
	color: inherit;
	white-space: inherit;
}

/* Images and figures. */
.wp-block-image img {
	display: block;
}

.wp-block-image .wp-element-caption,
.wp-block-gallery .wp-element-caption,
.wp-block-embed .wp-element-caption,
.wp-block-video .wp-element-caption {
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
}

:where(.wp-block-post-content, .is-root-container) > .wp-block-image,
:where(.wp-block-post-content, .is-root-container) > .wp-block-gallery,
:where(.wp-block-post-content, .is-root-container) > .wp-block-embed {
	margin-block: 32px 8px;
}

/* Table: uppercase muted header over a 2px ink rule, hairline rows. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table th {
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	padding: 12px 16px;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.wp-block-table td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
}

.wp-block-table .has-text-align-right,
.wp-block-table td.num,
.wp-block-table th.num {
	text-align: right;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--surface);
}

.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.wp-block-table .wp-element-caption {
	text-align: left;
}

/* Separators (SectionBreak): hairline (default), accent bar, dots. Each adds 24px on top of the column gap. */
hr.wp-block-separator {
	box-sizing: content-box;
	width: 100%;
	max-width: 1280px;
	height: 0;
	margin-block: var(--wp--preset--spacing--110) !important;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line-strong);
	background: none !important;
	color: inherit;
	opacity: 1;
	overflow: visible;
}

:where(.wp-block-post-content, .is-root-container) > hr.wp-block-separator {
	max-width: var(--wp--style--global--content-size);
}

hr.wp-block-separator.is-style-wide {
	max-width: var(--wp--style--global--content-size);
}

hr.wp-block-separator.is-style-accent {
	width: 48px;
	max-width: 48px;
	margin-left: 0 !important;
	border-top: 3px solid var(--wp--preset--color--orange);
}

:where(.wp-block-post-content, .is-root-container) > hr.wp-block-separator.is-style-accent {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

hr.wp-block-separator.is-style-dots {
	width: 42px;
	max-width: 42px;
	height: 6px;
	margin-inline: auto !important;
	margin-block: var( --wp--preset--spacing--70 ) !important;
	border: 0;
	background: radial-gradient(circle, var(--wp--preset--color--orange) 2.6px, transparent 3.2px) -6px 0 / 18px 6px repeat-x !important;
}

hr.wp-block-separator.is-style-dots::before {
	content: none;
}

/* Pages: the reading column sits flush left under the page title instead of centered. */
/* Full-width sections from patterns already sit inside the page's 1280px container, so they skip the page gutter. */
.an-page-content > .alignfull.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.an-page-content > hr.wp-block-separator.is-style-accent {
	margin-left: 0 !important;
}

.an-page-content > hr.wp-block-separator.is-style-dots {
	margin-left: calc(var(--wp--style--global--content-size) / 2 - 21px) !important;
}

@media (forced-colors: active) {
	hr.wp-block-separator.is-style-dots {
		height: 0;
		background: none !important;
		border-top: 1px solid CanvasText;
	}
}

/* Callout: editor's notes, updates, corrections. */
.wp-block-group.is-style-callout {
	background: var(--wp--preset--color--surface);
	border-top: 3px solid var(--wp--preset--color--slate);
	padding: 24px 28px;
	font-size: 17px;
	line-height: 1.7;
}

.wp-block-group.is-style-callout > * {
	margin-block: 0;
}

.wp-block-group.is-style-callout > * + * {
	margin-block-start: 8px;
}

/* Details: a quiet disclosure. */
.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 16px 0;
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

/* ==========================================================================
   Patterns built from core blocks
   ========================================================================== */

/* Career timeline: year | entry, hairline rows. */
.an-timeline {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.an-timeline > .wp-block-columns,
.an-timeline__item {
	margin: 0 !important;
	padding: 28px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	gap: 32px !important;
}

.an-timeline__year {
	padding-top: 4px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px !important;
	font-weight: 700;
	color: var(--wp--preset--color--slate);
}

.an-timeline .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 17px;
	line-height: 1.7;
}

.an-timeline .wp-block-column:last-child > * {
	margin: 0 !important;
}

.an-timeline h3.wp-block-heading {
	font-size: var(--wp--preset--font-size--minor);
}

.an-timeline ul.wp-block-list {
	gap: 4px;
}

/* Stat band: figures on slate-fill inside the column. */
.an-stat-band {
	background: var(--wp--preset--color--slate-fill);
	color: var(--wp--preset--color--on-slate);
	padding: 32px;
	gap: 28px !important;
}

.an-stat-band .wp-block-column > * {
	margin: 0 !important;
}

.an-stat-band .wp-block-column > * + * {
	margin-top: 8px !important;
}

.an-stat__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 30px !important;
	font-weight: 700;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--on-slate);
}

.an-stat__label {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--on-slate-muted);
}

/* Numbered features list. */
.an-features {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.an-features > .wp-block-columns {
	margin: 0 !important;
	padding: 22px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	gap: 20px !important;
}

.an-features__num,
.an-focus__num {
	padding-top: 3px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px !important;
	font-weight: 700;
	color: var(--wp--preset--color--orange-ink);
}

.an-features .wp-block-column:last-child > * {
	margin: 0 !important;
}

.an-features .wp-block-column:last-child > * + * {
	margin-top: 6px !important;
}

.an-features h3.wp-block-heading {
	font-size: var(--wp--preset--font-size--minor);
}

/* Home: focus areas, experience rows. */
.an-focus {
	padding-top: 22px;
	border-top: 2px solid var(--wp--preset--color--ink);
	gap: 12px;
}

.an-focus > * {
	margin: 0 !important;
}

.an-focus > * + * {
	margin-top: 12px !important;
}

.an-focus__num {
	font-size: 14px !important;
	padding: 0;
}

.an-exp {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.an-exp > .wp-block-columns {
	margin: 0 !important;
	padding: 22px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	gap: 32px !important;
	align-items: baseline !important;
}

.an-exp .wp-block-column > * {
	margin: 0 !important;
}

.an-exp__years {
	font-size: 14px !important;
	color: var(--wp--preset--color--ink-muted);
}

.an-exp__org {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px !important;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.an-exp__org a {
	color: inherit;
	text-decoration: none;
}

.an-exp__org a:hover {
	text-decoration: underline;
}

.an-exp__title {
	font-size: 16px !important;
	color: var(--wp--preset--color--slate);
}

/* Hero headline: the one sans headline. */
.an-hero-title {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 800 !important;
	line-height: 0.92 !important;
	letter-spacing: -0.045em !important;
}

/* Home hero image: 4:5 crop beside the headline, framed on the astronaut. */
.an-hero-image {
	margin: 0;
}

.an-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 30%;
	background: var(--wp--preset--color--night);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
	.an-list-item {
		grid-template-columns: 140px minmax(0, 1fr) 160px;
		gap: 32px !important;
	}

	.an-list-item .wp-block-post-featured-image,
	.an-list-item .an-placeholder {
		width: 160px;
	}
}

@media (max-width: 781px) {
	.an-header__inner {
		min-height: 64px;
	}

	.an-brand {
		gap: 10px;
	}

	.an-brand img {
		width: 74px;
		height: 34px;
	}

	.an-brand__wordmark {
		font-size: 15px;
	}

	.an-header__cta {
		display: none !important;
	}

	/* Home hero on phones: headline and intro, then a square image, then full-width buttons. */
	.an-hero {
		gap: 20px !important;
	}

	.an-hero > .wp-block-column:first-child {
		display: contents;
	}

	.an-hero > .wp-block-column:first-child > * {
		margin-block: 0 !important;
	}

	.an-hero > .wp-block-column:last-child {
		order: 1;
	}

	.an-hero .wp-block-buttons {
		order: 2;
	}

	.an-hero-image img {
		aspect-ratio: 1 / 1 !important;
		object-position: 52% 30%;
	}

	.an-post-meta .wp-block-avatar {
		display: none;
	}

	.an-post-header {
		padding-top: 32px;
		padding-bottom: 28px;
	}

	.an-post-header > * + * {
		margin-block-start: 16px !important;
	}

	.an-crumbs {
		column-gap: 10px !important;
	}

	.an-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 20px));
		padding-inline: var(--wp--style--root--padding-left, 20px);
		scrollbar-width: none;
	}

	.an-chips > li {
		flex-shrink: 0;
	}

	.an-placeholder[style*="min-height"] {
		min-height: 360px !important;
	}

	.an-featured {
		grid-template-columns: minmax(0, 1fr);
	}

	.an-featured .wp-block-post-featured-image,
	.an-featured .an-placeholder {
		min-height: 210px;
	}

	.an-featured__body {
		padding: 24px;
	}

	.an-list-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px !important;
		padding: 28px 0;
	}

	.an-list-item .wp-block-post-featured-image,
	.an-list-item .an-placeholder {
		display: none;
	}

	.an-list-item .wp-block-post-title {
		font-size: 22px;
	}

	.an-author {
		flex-direction: column;
	}

	.an-stat-band {
		padding: 24px;
	}

	.an-timeline > .wp-block-columns,
	.an-exp > .wp-block-columns,
	.an-features > .wp-block-columns {
		gap: 6px !important;
	}

	.an-features > .wp-block-columns {
		flex-wrap: nowrap !important;
		gap: 16px !important;
	}

	.an-features > .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 32px !important;
		flex-grow: 0 !important;
	}

	.wp-block-code,
	.wp-block-preformatted {
		padding: 16px !important;
		font-size: 12px !important;
	}

	.wp-block-buttons.an-stack-mobile {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-buttons.an-stack-mobile .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons.an-stack-mobile .wp-block-button__link {
		width: 100%;
	}
}

/* Focus areas: five across on desktop, three on tablets. */
@media (min-width: 782px) and (max-width: 1100px) {
	.an-focus-grid {
		flex-wrap: wrap !important;
	}

	.an-focus-grid > .wp-block-column {
		flex-basis: calc(33.33% - 22px) !important;
		flex-grow: 0 !important;
	}
}

/* Two-column page sections separated by a hairline. */
.an-rule-top {
	border-top: 1px solid var(--wp--preset--color--line);
}
