/*
Theme Name: Aim Grid
Theme URI: https://www.andrewmaddox.com/
Author: Andrew Maddox
Author URI: https://www.aimdigital.com/
Description: A dark, editorial blog theme built on the aim digital media colour grid. The fixed background grid shifts to each post's primary colour as readers scroll. Text sits on translucent, blurred panels; headlines in DIN, body copy in FF Tisa (Adobe Fonts), with free Google Fonts fallbacks.
Version: 1.2.0
Requires at least: 6.3
Tested up to: 6.8
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: aim-grid
Tags: blog, one-column, two-columns, right-sidebar, custom-menu, custom-logo, threaded-comments, translation-ready, dark
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--aim-ink: #000000;
	--aim-panel-rgb: 5, 6, 10;
	--aim-overlay: 0.74;      /* set from the Customizer */
	--aim-blur: 6px;          /* set from the Customizer */
	--aim-text: #DCE5EC;
	--aim-text-strong: #FFFFFF;
	--aim-muted: #A3B4C2;
	--aim-soft: #C3D0DA;
	--aim-link: #8FD0E2;
	--aim-focus: #7CC4D8;
	--aim-rule: rgba(163, 180, 194, 0.2);
	--aim-line: rgba(255, 255, 255, 0.28);

	--aim-font-display: "urw-din", "Barlow", "Helvetica Neue", Arial, sans-serif;
	--aim-font-body: "ff-tisa-web-pro", "Merriweather", Georgia, serif;
	--aim-font-mono: "Roboto Mono", Menlo, Consolas, monospace;

	--aim-gutter: clamp(16px, 4vw, 48px);
	--aim-pad: clamp(20px, 3vw, 32px);
}

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

html { background: var(--aim-ink); }

body {
	margin: 0;
	background: var(--aim-ink);
	color: var(--aim-text);
	font-family: var(--aim-font-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

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

/*
 * Link underlines are drawn with two background lines so they can animate:
 * a thin resting line (--aim-ul-rest, 0px = none) and a thicker line
 * (--aim-ul-hover) that draws in from the left on hover. On wrapped links
 * it draws line by line.
 */
a,
.comments-link span,
.post-nav__title {
	--aim-ul-rest: 1px;
	--aim-ul-hover: 2px;
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%, 0 100%;
	background-size: 0% var(--aim-ul-hover), 100% var(--aim-ul-rest);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, background-size 0.3s ease;
}
a { color: var(--aim-link); text-decoration: none; }
a:hover,
.comments-link:hover span,
.post-nav__link:hover .post-nav__title { background-size: 100% var(--aim-ul-hover), 100% var(--aim-ul-rest); }
/* Links that are tiles, pills or buttons, or carry the line on an inner span. */
.site-branding,
.site-nav a,
.comments-link,
.cat-links a,
.post-nav__link,
.pagination .page-numbers,
.comment-reply-link,
.screen-reader-text,
a:has(> img:only-child) { background-image: none; }
@media (prefers-reduced-motion: reduce) {
	a, .comments-link span, .post-nav__title { transition-property: color, background-color, border-color; }
}
a:focus-visible { outline: 2px solid var(--aim-focus); outline-offset: 3px; border-radius: 1px; }

h1, h2, h3, h4, h5, h6 { color: var(--aim-text-strong); font-family: var(--aim-font-display); line-height: 1.12; letter-spacing: -0.01em; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #fff; color: #05060A; clip: auto !important; clip-path: none;
	display: block; height: auto; width: auto; left: 8px; top: 8px; padding: 12px 18px; z-index: 100000;
	font-family: var(--aim-font-mono); font-size: 14px; text-decoration: none; border-radius: 8px;
}

/* ==========================================================================
   Background grid (recreated from aimdigital.com)
   ========================================================================== */
.bkg {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	overflow: hidden;
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(var(--cols, 15), 1fr); /* theme.js sets --cols: 15, 13, 11 or 9 */
	align-content: start;
	pointer-events: none;
}
/* Square cells. Each fades in, then changes colour, after its own delay (--d = (row + column) × 40ms). */
.bkg__cell {
	aspect-ratio: 1;
	opacity: 0;
	transition: opacity 0.75s ease, background-color 0.75s ease;
	transition-delay: var(--d, 0ms);
}
.bkg.is-on .bkg__cell { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.bkg__cell { transition: none; }
}
/* Arriving through a page transition: show the grid at once (no fade from
   black); theme.js then sweeps it from the last page's colours. */
.vt-arrival .bkg__cell { opacity: 1; transition: none; }

/* ==========================================================================
   Page transitions (View Transitions API; theme.js §6)
   The header holds still, the grid stays out of the crossfade (it sweeps to
   the new colours itself), and a post's panel, title and date circle grow from
   the list into the single post and back. Browsers without support navigate
   as before; reduced motion gets an instant switch.
   ========================================================================== */
/* The opt-in itself (@view-transition) is inline at the top of the head
   (functions.php), so it's read before any other stylesheet. */

.site-header { view-transition-name: aim-header; }
.bkg { view-transition-name: aim-grid; }
/* The page's content gets its own layer too: named layers are drawn above the
   page during a transition, so without this the grid's would cover it. */
.site { view-transition-name: aim-page; }
/* The single post's own parts; on lists theme.js names only the clicked post. */
.single #primary > .entry-row:first-child > .panel { view-transition-name: aim-post; }
.single #primary > .entry-row:first-child > .date-widget { view-transition-name: aim-date; }
.single #primary > .entry-row:first-child .entry-title { view-transition-name: aim-title; }

::view-transition-group(*) {
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
}
/* Content: the old page fades out quickly, the new one fades in with a slight rise. */
::view-transition-old(aim-page) { animation: aim-page-out 0.3s ease both; }
::view-transition-new(aim-page) { animation: aim-page-in 0.6s cubic-bezier(0.2, 0.8, 0.25, 1) 0.08s both; }
@keyframes aim-page-out { to { opacity: 0; } }
@keyframes aim-page-in { from { opacity: 0; transform: translateY(14px); } }
::view-transition-group(aim-grid),
::view-transition-new(aim-grid) { animation: none; }
::view-transition-old(aim-grid) { display: none; }
::view-transition-group(aim-header) { z-index: 2; }
/* Titles wrap differently at each size: keep the text's shape and let it
   crossfade from the top left, rather than stretching it. */
::view-transition-old(aim-title),
::view-transition-new(aim-title) {
	height: 100%;
	width: auto;
	object-fit: none;
	object-position: left top;
}

/* A full-height column, so the footer sits at the bottom of short pages. */
.site { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.site > .site-content { width: 100%; }

/* ==========================================================================
   Panels
   ========================================================================== */
.panel {
	background: rgba(var(--aim-panel-rgb), var(--aim-overlay));
	-webkit-backdrop-filter: blur(var(--aim-blur));
	backdrop-filter: blur(var(--aim-blur));
}
.panel { padding: var(--aim-pad); }

/* ==========================================================================
   Header + navigation
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: clamp(28px, 6vw, 100px);
	padding: 20px clamp(16px, 3vw, 32px);
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.single .site-header,
.page .site-header { margin-bottom: clamp(28px, 5vw, 76px); }

/* Sticky header (theme.js): away from the top, a radial shade spreads from the
   screen's top-left corner behind the logo and title (40% black → clear). It is
   larger than the header so the falloff isn't cut off. Scrolling down slides the
   header away, scrolling up brings it back. */
.site-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: min(640px, 100vw);
	height: 280px;
	z-index: -1;
	background: radial-gradient(farthest-side at 0 0, rgba(0, 0, 0, 0.4) 25%, rgba(0, 0, 0, 0));
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--aim-text-strong);
	text-decoration: none;
}
.site-logo__mark,
.site-branding .custom-logo { display: block; height: 60px; width: auto; }

/* Logo: on the first page of a visit (html.aim-write-logo, set in the head by
   functions.php) the circle pops in, a pen stroke reveals the lettering (the
   masks in assets/img/aim-logo-animated.svg), then the dot. 1.6s in all.
   Page-to-page navigation keeps it still. Skipped when reduced motion is requested. */
@media (prefers-reduced-motion: no-preference) {
	.aim-write-logo .site-logo__circle {
		transform-origin: 172.14px 103.3px;
		animation: aim-logo-circle 0.35s cubic-bezier(0.3, 1.3, 0.5, 1) both;
	}
	.aim-write-logo .site-logo__pen {
		stroke-dasharray: 1 2;
		stroke-dashoffset: 1;
		animation: aim-logo-write 1.05s cubic-bezier(0.5, 0.05, 0.6, 0.95) 0.2s forwards;
	}
	.aim-write-logo .site-logo__pen--dot { animation-duration: 0.3s; animation-delay: 1.3s; animation-timing-function: ease-out; }
}
@keyframes aim-logo-circle { from { opacity: 0; transform: scale(0.85); } }
@keyframes aim-logo-write { to { stroke-dashoffset: 0; } }

.site-title {
	margin: 0;
	font-size: 26px;
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--aim-text-strong);
}
.site-title b { font-weight: 600; }

/* Branding hover/focus: the logo grows a touch and its circle deepens; a thin
   line draws in under the title from the left, like the post-title links. */
.site-logo__mark,
.site-branding .custom-logo { transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.site-logo__circle { transition: fill-opacity 0.3s ease; }
.site-title {
	position: relative;
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1);
}
/* Away from the top (theme.js §4 sets .is-scrolled), the header shows only the
   aim circle: the title slips back into the logo and fades. It stays in the
   link for screen readers. */
.site-header.is-scrolled .site-title {
	opacity: 0;
	transform: translateX(-12px);
	pointer-events: none;
}
.site-title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.site-branding:hover .site-logo__mark,
.site-branding:focus-visible .site-logo__mark,
.site-branding:hover .custom-logo,
.site-branding:focus-visible .custom-logo { transform: scale(1.05); }
.site-branding:hover .site-logo__circle,
.site-branding:focus-visible .site-logo__circle { fill-opacity: 0.82; }
.site-branding:hover .site-title::after,
.site-branding:focus-visible .site-title::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
	.site-branding:hover .site-logo__mark,
	.site-branding:focus-visible .site-logo__mark,
	.site-branding:hover .custom-logo,
	.site-branding:focus-visible .custom-logo { transform: none; }
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	font-family: var(--aim-font-display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.site-nav ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav li { margin: 0; }
.site-nav a,
.nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 8px;
	color: #FFFFFF;
	text-decoration: none;
	transition: color 0.3s ease, background-color 0.3s ease;
}
.nav-icon { width: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
.site-nav a:hover,
.nav-icon:hover { background: rgba(255, 255, 255, 0.14); }
.site-nav a:focus-visible,
.nav-icon:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; border-radius: 8px; }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_parent > a,
.site-nav a[aria-current] { box-shadow: inset 0 0 0 1px #FFFFFF; }

/* Hover highlight (theme.js): one tile that moves between items. The edge on
   the side it's heading moves first and the trailing edge follows, with a
   slight overshoot, so it stretches and settles. */
.site-nav.has-blob { position: relative; }
.site-nav.has-blob a,
.site-nav.has-blob .nav-icon { position: relative; z-index: 1; }
.site-nav.has-blob a:hover,
.site-nav.has-blob .nav-icon:hover { background: transparent; }
.nav-blob {
	position: absolute;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.14);
	opacity: 0;
	pointer-events: none;
	--aim-blob-ease: cubic-bezier(0.3, 1.35, 0.5, 1);
	transition:
		right 0.32s var(--aim-blob-ease),
		left 0.42s var(--aim-blob-ease) 0.07s,
		top 0.3s var(--aim-blob-ease),
		height 0.3s var(--aim-blob-ease),
		opacity 0.25s ease;
}
.nav-blob.is-heading-left {
	transition:
		left 0.32s var(--aim-blob-ease),
		right 0.42s var(--aim-blob-ease) 0.07s,
		top 0.3s var(--aim-blob-ease),
		height 0.3s var(--aim-blob-ease),
		opacity 0.25s ease;
}
.nav-blob.is-placing { transition: opacity 0.25s ease; }
.site-nav.is-hovering .nav-blob { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.nav-blob,
	.nav-blob.is-heading-left { transition: opacity 0.2s ease; }
}
.site-nav .sub-menu { display: none; }

/* Search (theme.js §2): the bar morphs into a search field. The links fade out,
   the bar animates to its new width (anchored on the right), the magnifier
   slides to the left as the field's icon, and the field and × fade in. */
.nav-search { display: none; align-items: center; gap: 2px; }
.site-nav.is-searching .nav-search { display: flex; }
.site-nav.is-searching > ul,
.site-nav.is-searching > a.nav-icon { display: none; }
.site-nav.is-searching [data-search-toggle] { order: -1; }
.site-nav.is-searching:focus-within { border-color: rgba(255, 255, 255, 0.4); }
.nav-search input[type="search"] {
	width: min(300px, 52vw);
	min-height: 44px;
	padding: 0 6px;
	border: 0;
	background: transparent;
	color: #FFFFFF;
	font-family: var(--aim-font-display);
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: none;
	outline: none; /* the bar's border brightens instead (:focus-within above) */
}
.nav-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nav-search input::placeholder { color: #93A6B5; }

.site-nav > ul,
.site-nav > a.nav-icon,
.nav-search { transition: opacity 0.15s ease; }
.site-nav.is-fading-out > ul,
.site-nav.is-fading-out > a.nav-icon,
.site-nav.is-fading-out .nav-search { opacity: 0; }
.site-nav.is-morphing {
	overflow: hidden;
	justify-content: flex-end;
	transition: width 0.4s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.site-nav.is-morphing > * { flex-shrink: 0; } /* keep each item's final size while the bar resizes */
.site-nav.is-morphing [data-search-toggle] { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1); }
.site-nav.is-arriving > ul,
.site-nav.is-arriving > a.nav-icon,
.site-nav.is-arriving .nav-search { animation: aim-nav-arrive 0.25s ease 0.12s both; }
@keyframes aim-nav-arrive { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   Mobile menu (theme.js §5). Below 760px, where the header would wrap (it
   does at ~600px, ~750px with search open), the nav becomes a full-screen
   menu behind a hamburger. It opens as a circle growing from the button,
   then the search row, links and RSS rise in one after another.
   -------------------------------------------------------------------------- */
.menu-toggle { display: none; }

@media (max-width: 759px) {
	.menu-toggle { position: relative; z-index: 2; } /* stays above the open menu, to close it */

	.menu-toggle {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 7px;
		width: 48px;
		height: 48px;
		margin-left: auto;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 12px;
		background: rgba(0, 0, 0, 0.6);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		color: #FFFFFF;
		cursor: pointer;
	}
	.menu-toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
	.menu-toggle__bar {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.35s cubic-bezier(0.6, 0, 0.2, 1);
	}
	.is-menu-open .menu-toggle__bar:first-child { transform: translateY(4.5px) rotate(45deg); }
	.is-menu-open .menu-toggle__bar:last-child { transform: translateY(-4.5px) rotate(-45deg); }

	/* The header stays one row: logo + title on the left, hamburger on the right */
	.site-header { flex-wrap: nowrap; }
	.site-branding { min-width: 0; }

	/* The nav, as the full-screen menu (.has-blob too, to win over its position) */
	.site-nav,
	.site-nav.has-blob {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr 48px;
		grid-template-areas: "search find" "links links" "rss rss";
		align-content: start;
		gap: 0;
		padding: 112px 24px 40px;
		overflow-y: auto;
		border: 0;
		border-radius: 0;
		background: rgba(5, 6, 10, 0.88);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		font-size: 16px;
		clip-path: circle(0 at var(--aim-menu-x, 100%) var(--aim-menu-y, 0));
		visibility: hidden;
		transition: clip-path 0.45s cubic-bezier(0.6, 0, 0.3, 1), visibility 0s linear 0.45s;
	}
	.is-menu-open .site-nav {
		clip-path: circle(150vmax at var(--aim-menu-x, 100%) var(--aim-menu-y, 0));
		visibility: visible;
		transition: clip-path 0.55s cubic-bezier(0.6, 0, 0.2, 1), visibility 0s;
	}
	.site-nav .nav-blob { display: none; }

	/* Search: one rounded box, field on the left, magnifier on the right (it
	   searches, as Return does). The form and button share the border. */
	.site-nav .nav-search,
	.site-nav.is-searching .nav-search {
		grid-area: search;
		display: flex;
		padding-left: 10px;
		border: 1px solid rgba(255, 255, 255, 0.32);
		border-right: 0;
		border-radius: 12px 0 0 12px;
		background: rgba(255, 255, 255, 0.06);
	}
	.site-nav [data-search-toggle] {
		grid-area: find;
		order: 0;
		width: 48px;
		height: 50px;
		border: 1px solid rgba(255, 255, 255, 0.32);
		border-left: 0;
		border-radius: 0 12px 12px 0;
		background: rgba(255, 255, 255, 0.06);
	}
	.site-nav [data-search-toggle]:hover { background: rgba(255, 255, 255, 0.14); }
	.site-nav .nav-search:focus-within,
	.site-nav .nav-search:focus-within + [data-search-toggle] { border-color: rgba(255, 255, 255, 0.7); }
	.nav-search input[type="search"] { width: 100%; min-height: 48px; font-size: 18px; }
	.nav-search [data-search-close] { display: none; }
	.site-nav.is-searching:focus-within { border-color: transparent; }

	/* Links: large, stacked */
	.site-nav > ul,
	.site-nav.is-searching > ul { grid-area: links; display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
	/* Links: large, title case, no outline. 80% white, 90% on hover, the
	   current page 100% and underlined. */
	.site-nav > ul a {
		justify-content: flex-start;
		min-height: 60px;
		padding: 0;
		font-size: 34px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
		color: rgba(255, 255, 255, 0.8);
	}
	.site-nav > ul a:hover,
	.site-nav.has-blob > ul a:hover { background: transparent; color: rgba(255, 255, 255, 0.9); }
	.site-nav .current-menu-item > a,
	.site-nav .current_page_item > a,
	.site-nav .current-menu-ancestor > a,
	.site-nav .current_page_parent > a,
	.site-nav a[aria-current] {
		box-shadow: none;
		color: #FFFFFF;
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 8px;
	}

	/* RSS, with its label shown */
	.site-nav > a.nav-icon,
	.site-nav.is-searching > a.nav-icon {
		grid-area: rss;
		display: inline-flex;
		justify-self: start;
		gap: 10px;
		width: auto;
		margin: 28px 0 0 -12px;
		padding: 0 12px;
		color: rgba(255, 255, 255, 0.8);
		font-size: 16px;
		letter-spacing: 0;
		text-transform: none;
	}
	.site-nav > a.nav-icon:hover { background: transparent; color: rgba(255, 255, 255, 0.9); }
	.site-nav > a.nav-icon::after { content: attr(aria-label); }

	/* Contents rise in after the circle opens */
	.site-nav > :not(.nav-blob) {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
	.is-menu-open .site-nav > :not(.nav-blob) {
		opacity: 1;
		transform: none;
		transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1);
	}
	.is-menu-open .site-nav > [data-search-toggle],
	.is-menu-open .site-nav > .nav-search { transition-delay: 0.18s; }
	.is-menu-open .site-nav > ul { transition-delay: 0.25s; }
	.is-menu-open .site-nav > a.nav-icon { transition-delay: 0.32s; }

	html.menu-open { overflow: hidden; } /* no page scrolling behind the menu */
}
@media (max-width: 420px) {
	.site-logo__mark,
	.site-branding .custom-logo { height: 48px; }
	.site-title { font-size: 21px; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
	.site-nav,
	.is-menu-open .site-nav { clip-path: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; opacity: 0; }
	.is-menu-open .site-nav { opacity: 1; transition: opacity 0.2s ease, visibility 0s; }
	.site-nav > :not(.nav-blob) { transform: none; }
	.menu-toggle__bar { transition: none; }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.site-content {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--aim-gutter) 160px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}
.content-area { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.sidebar { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 32px; position: sticky; top: 24px; transition: top 0.4s cubic-bezier(0.2, 0.7, 0.3, 1); }
.header-shown .sidebar { top: calc(var(--aim-header-h, 0px) + 24px); } /* clear the sticky header while it shows */
@media (max-width: 900px) { .sidebar { position: static; } }

.single .site-content,
.page .site-content { max-width: 1040px; flex-direction: column; flex-wrap: nowrap; gap: 40px; padding-bottom: 96px; }
.single .content-area,
.page .content-area { flex: none; width: 100%; }

/* A post: date widget on the left, panel on the right */
.entry-row { display: flex; gap: 12px; align-items: flex-start; }
.entry-row > .panel { flex: 1; min-width: 0; }
.entry-row__spacer { flex: none; width: 52px; } /* the date widget's width */
@media (max-width: 720px) { .entry-row__spacer { display: none; } }

/* ==========================================================================
   Date widget
   ========================================================================== */
/* Month, then the day as an aim circle (days ending in 2 or 4 have a short tail past the circle),
   then the year for posts from earlier years. */
.date-widget {
	--aim-date-size: 52px;
	position: relative;
	z-index: 1;
	flex: none;
	width: var(--aim-date-size);
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #FFFFFF;
	line-height: 1;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.date-widget__month { margin-bottom: 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.date-widget__day {
	display: block;
	align-self: flex-start;
	width: calc(var(--aim-date-size) * 228 / 206.61); /* the SVG is wider than its circle */
	max-width: none;
	height: var(--aim-date-size);
}
.date-widget__year { margin-top: 5px; font-size: 13px; color: var(--aim-soft); }

.date-widget--small { --aim-date-size: 40px; margin-right: 8px; }
.date-widget--small .date-widget__month { margin-bottom: 3px; font-size: 12px; }
.date-widget--small .date-widget__year { margin-top: 3px; font-size: 11px; }

/* ==========================================================================
   Entries
   ========================================================================== */
.entry-header { margin: 0; }
.entry-title { margin: 0; font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); }
.entry-title a { --aim-ul-rest: 0px; --aim-ul-hover: 3px; color: var(--aim-text-strong); }
.single .entry-title,
.page .entry-title { font-weight: 700; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.015em; }

/* Post body */
.entry-content {
	margin-top: 28px;
	font-family: var(--aim-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	color: var(--aim-text);
}
.single .entry-content,
.page .entry-content { margin-top: 40px; font-size: 17px; line-height: 1.75; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content p { margin: 0; }
.entry-content p + p { margin-top: 1em; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin: 1.6em 0 0.4em; font-weight: 500; }
.entry-content h2 { font-size: 26px; }
.entry-content h3 { font-size: 22px; }
.entry-content strong, .entry-content b { font-weight: 600; color: var(--aim-text-strong); }

/* Lists: plain bullets and numbers */
.entry-content ul,
.entry-content ol { margin: 0; padding-left: 1.4em; }
.entry-content * + ul,
.entry-content * + ol { margin-top: 1.1em; }
.entry-content li + li { margin-top: 0.4em; }

.entry-content blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid rgba(255, 255, 255, 0.4);
	font-style: italic;
	color: var(--aim-soft);
}
.entry-content blockquote cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--aim-font-display); font-size: 14px; color: var(--aim-muted); }
.entry-content figure { margin: 1.6em 0; }
.entry-content figcaption { margin-top: 8px; font-family: var(--aim-font-display); font-size: 14px; color: var(--aim-muted); }
.entry-content img { display: block; }
.entry-content pre, .entry-content code { font-family: var(--aim-font-mono); font-size: 0.9em; }
.entry-content pre { padding: 16px; overflow-x: auto; background: rgba(255, 255, 255, 0.06); border-radius: 8px; }
.entry-content hr { border: 0; border-top: 1px solid var(--aim-rule); margin: 2em 0; }
.entry-content table { border-collapse: collapse; width: 100%; font-family: var(--aim-font-display); font-size: 15px; }
.entry-content th, .entry-content td { padding: 8px 10px; border-bottom: 1px solid var(--aim-rule); text-align: left; }
.alignwide, .alignfull { max-width: none !important; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-element-caption { font-family: var(--aim-font-display); font-size: 14px; color: var(--aim-muted); }
.sticky .entry-title::after { content: ""; }
.bypostauthor { }
.gallery-caption { }

.more-link { font-family: var(--aim-font-display); font-weight: 500; }

/* Footer row on each post */
.entry-footer {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--aim-rule);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}
.comments-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 16px;
	font-weight: 500;
	color: var(--aim-link);
	text-decoration: none;
}

.pill,
.cat-links a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	font-family: var(--aim-font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aim-text);
	text-decoration: none;
}
.cat-links { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cat-links a:hover { background: rgba(255, 255, 255, 0.14); }
.cat-links a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; border-radius: 999px; }

/* Previous / next on a single post */
.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.post-nav__link {
	display: flex;
	gap: 14px;
	align-items: center;
	max-width: 440px;
	color: var(--aim-text-strong);
	text-decoration: none;
}
.post-nav__label { display: block; font-size: 14px; color: var(--aim-muted); }
.post-nav__title { --aim-ul-rest: 0px; font-size: 18px; line-height: 1.3; } /* inline, so the line follows the text */

/* ==========================================================================
   Sidebar
   ========================================================================== */
.about__title { margin: 0; font-size: 30px; font-weight: 300; line-height: 1.1; }
/* Content from the Customizer's visual editor */
.about__content { margin-top: 14px; font-family: var(--aim-font-body); font-weight: 300; font-size: 16px; line-height: 1.7; }
.about__content > * { margin: 0; }
.about__content > * + * { margin-top: 14px; }
.about__content hr { margin: 20px 0; border: 0; border-top: 1px solid var(--aim-rule); }
.about__content hr + * { margin-top: 0; }
.about__content h3,
.about__content h4 { font-size: 18px; font-weight: 600; }
.about__content ul,
.about__content ol { padding-left: 1.2em; }
.about__content strong { font-family: var(--aim-font-display); font-size: 18px; font-weight: 600; color: var(--aim-text-strong); }
.about__content .about__link { margin-top: 16px; font-family: var(--aim-font-display); font-size: 17px; font-weight: 500; }

.widget { font-size: 16px; }
.widget-title { margin: 0 0 12px; font-size: 22px; font-weight: 500; }
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { padding: 8px 0; border-top: 1px solid var(--aim-rule); }
.widget li:first-child { border-top: 0; }

/* ==========================================================================
   Archive / search headers, pagination, 404
   ========================================================================== */
/* No panel: the heading sits on the grid, with a shadow to keep it legible. */
.page-header { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.page-header .page-title { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.page-header .archive-description { margin-top: 10px; font-family: var(--aim-font-body); font-weight: 300; color: var(--aim-soft); }

.pagination .nav-links,
.comment-navigation .nav-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 12px;
	border-radius: 8px;
	background: rgba(var(--aim-panel-rgb), var(--aim-overlay));
	-webkit-backdrop-filter: blur(var(--aim-blur)); backdrop-filter: blur(var(--aim-blur));
	color: #FFFFFF; text-decoration: none;
	font-family: var(--aim-font-mono); font-size: 14px; text-transform: uppercase;
}
.pagination .page-numbers.current { background: #FFFFFF; color: #05060A; }
.pagination a.page-numbers:hover { background: rgba(255, 255, 255, 0.2); }

.search-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ==========================================================================
   Forms (comments, search)
   ========================================================================== */
.field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-form .search-field {
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
	font-family: var(--aim-font-display);
	font-size: 16px;
	transition: border-color 0.15s ease;
}
.search-form .search-field { flex: 1 1 220px; width: auto; }
.comment-form textarea {
	padding: 12px 14px;
	font-family: var(--aim-font-body);
	line-height: 1.6;
	resize: vertical;
	min-height: 150px;
}
.field:hover,
.comment-form input:hover,
.comment-form textarea:hover,
.search-form .search-field:hover { border-color: rgba(255, 255, 255, 0.5); }
.field:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.search-form .search-field:focus { outline: 2px solid var(--aim-link); outline-offset: 1px; }
::placeholder { color: #7F91A0; }

.button,
.comment-form .submit,
.search-form .search-submit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: #FFFFFF;
	color: #05060A;
	font-family: var(--aim-font-mono);
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
}
.button:hover,
.comment-form .submit:hover,
.search-form .search-submit:hover { background: var(--aim-text); }
.button:focus-visible,
.comment-form .submit:focus-visible,
.search-form .search-submit:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* ==========================================================================
   Comments
   ========================================================================== */
.comments-title { margin: 0; font-size: 30px; font-weight: 300; line-height: 1.1; }
.comment-list,
.comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list { margin-top: 24px; }
.comment-list .children { padding-left: 54px; }
.comment-list > li + li,
.comment-list .children > li { border-top: 1px solid var(--aim-rule); }
.comment-body { padding: 20px 0; display: flex; gap: 14px; align-items: flex-start; }
.comment-avatar { flex: none; width: 40px; height: 40px; }
.comment-avatar img { display: block; width: 40px; height: 40px; }
.comment-avatar__tile {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	font-size: 17px; font-weight: 600; color: #FFFFFF;
	text-transform: uppercase;
}
.comment-main { min-width: 0; flex: 1; }
.comment-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.comment-author-name { font-size: 17px; font-weight: 600; color: var(--aim-text-strong); }
.comment-author-name a { --aim-ul-rest: 0px; color: inherit; }
.comment-author-pill { min-height: 22px; padding: 0 8px; font-size: 11px; }
.comment-date { font-size: 14px; color: var(--aim-muted); }
.comment-awaiting { margin: 6px 0 0; font-size: 14px; color: var(--aim-soft); }
.comment-content {
	margin-top: 8px;
	max-width: 60ch;
	font-family: var(--aim-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
}
.comment-content p { margin: 0; }
.comment-content p + p { margin-top: 0.9em; }
.reply { margin-top: 8px; }
.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 10px 0 6px;
	border-radius: 8px;
	color: var(--aim-link);
	font-family: var(--aim-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
}
.comment-reply-link::before {
	content: "";
	width: 16px; height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 6 6v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 6 6v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.comment-reply-link:hover { background: rgba(255, 255, 255, 0.14); }
.comment-reply-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.comment-respond {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--aim-rule);
}
.comment-list .comment-respond { margin: 0 0 20px; }
.no-comments + .comment-respond,
.comments-area > .comment-respond:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.comment-reply-title { margin: 0; font-size: 24px; font-weight: 400; }
.comment-reply-title small { margin-left: 12px; font-size: 14px; font-weight: 400; }
.comment-reply-title small a { font-family: var(--aim-font-mono); font-size: 12px; text-transform: uppercase; }
.comment-form { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.comment-notes,
.logged-in-as {
	margin: -12px 0 0;
	font-family: var(--aim-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	color: var(--aim-soft);
}
.comment-form label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--aim-text-strong); }
.comment-form .optional { font-weight: 400; color: var(--aim-muted); }
.comment-form .required { color: var(--aim-muted); }
.comment-form__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.comment-form p { margin: 0; }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.comment-form-cookies-consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--aim-link); }
.comment-form-cookies-consent label { margin: 0; font-weight: 400; color: var(--aim-text); cursor: pointer; }
.no-comments { margin: 16px 0 0; color: var(--aim-soft); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	margin-top: auto;
	padding: 18px clamp(16px, 3vw, 32px); /* same sides as the header, so it lines up with the logo */
	background: rgba(var(--aim-panel-rgb), var(--aim-overlay));
	-webkit-backdrop-filter: blur(var(--aim-blur));
	backdrop-filter: blur(var(--aim-blur));
	font-size: 14px;
	color: var(--aim-muted);
}
.site-footer p { margin: 0; }

/* ==========================================================================
   Core block widgets (Search, Latest Posts, Archives…) in the sidebar
   ========================================================================== */
.widget h2,
.widget .wp-block-heading { margin: 0 0 12px; font-size: 22px; font-weight: 500; }
.widget ol { margin: 0; padding: 0; list-style: none; }
.widget ol > li { padding: 8px 0; border-top: 1px solid var(--aim-rule); }
.widget ol > li:first-child { border-top: 0; }
.widget .wp-block-search__label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--aim-text-strong); }
.widget .wp-block-search__inside-wrapper { display: flex; gap: 8px; }
.widget .wp-block-search__input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
	font-family: var(--aim-font-display);
	font-size: 16px;
}
.widget .wp-block-search__input:focus { outline: 2px solid var(--aim-link); outline-offset: 1px; }
.widget .wp-block-search__button {
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	background: #FFFFFF;
	color: #05060A;
	font-family: var(--aim-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	cursor: pointer;
}
.widget .wp-block-latest-comments { padding: 0; }
.widget .wp-block-latest-comments__comment { margin: 0; padding: 8px 0; border-top: 1px solid var(--aim-rule); line-height: 1.4; }
.widget .wp-block-latest-comments__comment:first-child { border-top: 0; }
.widget .wp-block-latest-comments__comment article { margin: 0; }