/*
Theme Name: Andrea Skyberg
Template: royale-news
Description: Child theme of Royale News for andreaskyberg.com. It supplies all the front-end templates and styling; the parent provides menus, image sizes and settings.
Author: Greer Creative
Version: 0.2.0
Requires PHP: 8.2
Text Domain: andreaskyberg
*/

/*
 * The parent's CSS is not loaded (see functions.php); everything is styled here.
 * Black and white with one accent color, Oswald for display type and Inter for text,
 * the same system as mwgreer.com with Andrea's own accent.
 */

:root {
	--ink: #0a0a0a;
	--paper: #fff;
	--dark: #0a0a0a; /* The bar, banners, menus, grid and footer. */
	--accent: #ff4b3a; /* Red-orange. */
	--on-accent: #0a0a0a; /* Text on the accent: black is 6.0:1, white only 3.3:1. */
	--accent-text: #ff4b3a; /* The accent as small text on black: 6.0:1. */
	--grey: #6b6b6b;
	--line: #e4e4e4;
	--display: "Oswald", "Arial Narrow", sans-serif;
	--body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bar: 64px;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--gutter: max(16px, 4vw);
	--gap: 4px;
}

/* ---------- Base ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 1rem/1.6 var(--body);
	-webkit-font-smoothing: antialiased;
}

body.ak-menu-open {
	overflow: hidden;
}

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

a {
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

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

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	clip: auto;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 700;
}

.ak-label {
	display: inline-block;
	padding: 4px 8px;
	background: var(--accent);
	color: var(--on-accent);
	font: 500 0.75rem/1.2 var(--display);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.ak-button,
.ak-content input[type="submit"],
.ak-content button,
.ak-comments input[type="submit"],
.search-form .search-submit {
	display: inline-block;
	padding: 12px 22px;
	border: 0;
	border-radius: 0;
	background: var(--dark);
	color: var(--paper);
	font: 700 1rem/1.2 var(--display);
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.ak-button:hover,
.ak-content input[type="submit"]:hover,
.ak-content button:hover,
.ak-comments input[type="submit"]:hover,
.search-form .search-submit:hover {
	background: var(--accent);
	color: var(--on-accent);
}

/* ---------- Top bar and menu ---------- */

.ak-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	height: var(--bar);
	padding-right: var(--gutter);
	background: var(--dark);
	color: var(--paper);
}

.admin-bar .ak-bar {
	top: 32px;
}

.ak-brand {
	display: flex;
	align-items: center;
	align-self: stretch;
	padding: 0 var(--gutter);
	background: var(--accent);
	color: var(--on-accent);
	font: 700 1.375rem/1 var(--display);
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.ak-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-nav a {
	text-decoration: none;
}

.ak-sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.ak-sub-toggle::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s;
}

.ak-sub-toggle[aria-expanded="true"]::before {
	transform: translateY(2px) rotate(-135deg);
}

/* Wide screens: one row of sections, sub-menus drop down as black panels. */
@media (min-width: 1100px) {
	.ak-menu-toggle {
		display: none;
	}

	.ak-nav {
		margin-left: auto;
	}

	.ak-menu {
		display: flex;
		align-items: center;
	}

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

	.ak-menu > li > a {
		display: block;
		padding: 0 10px;
		font: 500 0.9375rem/var(--bar) var(--display);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.ak-menu > li > .ak-sub-toggle {
		margin-left: -8px;
		margin-right: 2px;
		width: 22px;
	}

	.ak-menu > li > a:hover,
	.ak-menu > li:hover > a,
	.ak-menu > li.current-menu-item > a,
	.ak-menu > li.current-menu-ancestor > a {
		box-shadow: inset 0 -4px var(--accent);
	}

	.ak-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		display: none;
		min-width: 280px;
		padding: 14px 0 18px;
		border: 1px solid #262626; /* No red edge here: the bar under the hovered link already marks it. */
		background: var(--dark);
		box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
	}

	/* The last few sections open leftwards so the panel stays on screen. */
	.ak-menu > li:nth-last-child(-n + 3) > .sub-menu {
		left: auto;
		right: 0;
	}

	.ak-menu > li:hover > .sub-menu,
	.ak-menu > li:focus-within > .sub-menu,
	.ak-menu > li.is-open > .sub-menu {
		display: block;
	}

	.ak-menu .sub-menu a {
		display: block;
		padding: 7px 24px;
		font-size: 0.9375rem;
		line-height: 1.35;
	}

	/* Third level: always shown, indented under its parent. */
	.ak-menu .sub-menu .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 6px;
		border: 0;
		box-shadow: none;
	}

	.ak-menu .sub-menu .sub-menu a {
		padding: 4px 24px 4px 40px;
		color: #c4c4c4;
		font-size: 0.875rem;
	}

	/* After the third-level rule so hovered rows at every level get readable text. */
	.ak-menu .sub-menu a:hover,
	.ak-menu .sub-menu a:focus-visible {
		background: var(--accent);
		color: var(--on-accent);
	}
}

/* Just above the Menu-button size, all nine sections only fit on one row when set a little tighter. */
@media (min-width: 1100px) and (max-width: 1339.98px) {
	.ak-brand {
		padding: 0 24px;
		font-size: 1.25rem;
	}

	.ak-menu > li > a {
		padding: 0 7px;
		font-size: 0.875rem;
		letter-spacing: 0.03em;
	}

	.ak-menu > li > .ak-sub-toggle {
		margin-left: -6px;
		width: 20px;
	}
}

/* Narrow screens: a Menu button opens a full-screen panel. */
@media (max-width: 1099.98px) {
	.ak-menu-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-left: auto;
		padding: 8px 0;
		border: 0;
		background: none;
		color: inherit;
		font: 500 1rem/1 var(--display);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.ak-menu-toggle-icon,
	.ak-menu-toggle-icon::before,
	.ak-menu-toggle-icon::after {
		display: block;
		width: 24px;
		height: 2px;
		background: currentColor;
		transition: transform 0.2s, background 0.2s;
	}

	.ak-menu-toggle-icon {
		position: relative;
	}

	.ak-menu-toggle-icon::before,
	.ak-menu-toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.ak-menu-toggle-icon::before {
		top: -7px;
	}

	.ak-menu-toggle-icon::after {
		top: 7px;
	}

	.ak-menu-open .ak-menu-toggle-icon {
		background: transparent;
	}

	.ak-menu-open .ak-menu-toggle-icon::before {
		transform: translateY(7px) rotate(45deg);
	}

	.ak-menu-open .ak-menu-toggle-icon::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	.ak-nav {
		position: fixed;
		inset: var(--bar) 0 0;
		display: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px var(--gutter) 48px;
		background: var(--dark);
	}

	.admin-bar .ak-nav {
		top: calc(var(--bar) + 46px);
	}

	.ak-menu-open .ak-nav {
		display: block;
	}

	.ak-menu > li {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		border-bottom: 1px solid #262626;
	}

	.ak-menu > li > a {
		padding: 14px 0;
		font: 700 clamp(1.5rem, 6vw, 2.25rem)/1.1 var(--display);
		text-transform: uppercase;
	}

	.ak-menu > li > .ak-sub-toggle {
		width: 48px;
		height: 48px;
	}

	.ak-menu > li > .sub-menu {
		display: none;
		grid-column: 1 / -1;
		padding: 0 0 16px;
	}

	.ak-menu > li.is-open > .sub-menu {
		display: block;
	}

	.ak-menu .sub-menu a {
		display: block;
		padding: 7px 0;
		font-size: 1.0625rem;
	}

	.ak-menu .sub-menu .sub-menu {
		padding-left: 18px;
		border-left: 2px solid var(--accent);
	}

	.ak-menu .sub-menu .sub-menu a {
		color: #b5b5b5;
		font-size: 1rem;
	}

	.ak-menu a:hover,
	.ak-menu .current-menu-item > a {
		color: var(--paper);
		text-decoration: underline;
		text-decoration-color: var(--accent);
		text-decoration-thickness: 3px;
		text-underline-offset: 6px;
	}
}

@media (max-width: 782px) {
	.admin-bar .ak-bar {
		top: 46px;
	}
}

@media (max-width: 600px) {
	/* WordPress's admin bar scrolls away here, so the bar sticks to the top. */
	.admin-bar .ak-bar {
		top: 0;
	}
}

@media (max-width: 380px) {
	.ak-brand {
		font-size: 1.125rem;
	}
}

/* ---------- Home: name banner ---------- */

.ak-hero {
	padding: clamp(28px, 4.5vw, 64px) var(--gutter) clamp(24px, 3.5vw, 48px);
	background: var(--dark);
	color: var(--paper);
	overflow: hidden;
}

.ak-hero-name {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	animation: ak-focus 1.6s var(--ease-out) 0.1s both;
}

/* The first name, smaller, above the surname. */
.ak-hero-first {
	position: relative;
	z-index: 1;
	margin: 0 0 0.04em;
	color: var(--accent);
	font: 700 clamp(1.75rem, 4.4vw, 3.75rem)/1 var(--display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ak-hero-last {
	font: 700 clamp(3rem, 11vw, 9.5rem)/0.92 var(--display);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	transform-origin: left center;
	animation: ak-settle 1.8s var(--ease-out) 0.1s both;
}

/* Worn-print texture on the name (filter defined in home.php). */
.ak-hero-first,
.ak-hero-last {
	filter: url(#ak-grit);
}

.ak-svg-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.ak-hero-roles {
	display: flex;
	flex-wrap: wrap;
	margin: clamp(14px, 1.8vw, 24px) 0 0;
	font: 500 clamp(1rem, 1.8vw, 1.5rem)/1.3 var(--display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	animation: ak-fade-up 0.9s var(--ease-out) 0.9s both;
}

.ak-hero-roles span + span::before {
	content: "/";
	margin: 0 0.5em;
	color: var(--accent-text);
}

/*
 * Soft focus: the name resolves from a blur while the surname settles to size. Plays once.
 * The surname scales rather than tracking in: a transform carries the worn texture with the
 * letters, while animated letter-spacing slid them across a texture that stayed put.
 */
@keyframes ak-focus {
	from {
		opacity: 0;
		filter: blur(14px);
	}
}

@keyframes ak-settle {
	from {
		transform: scale(1.08);
	}
}

@keyframes ak-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

/* ---------- Home: newest post ---------- */

.ak-feature-link {
	position: relative;
	display: block;
	height: min(86vh, 960px);
	min-height: 440px;
	overflow: hidden;
	background: var(--dark);
	color: var(--paper);
	text-decoration: none;
}

.ak-feature-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ak-feature-link:hover .ak-feature-image {
	transform: scale(1.03);
}

.ak-feature-text {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 120px var(--gutter) clamp(28px, 5vw, 64px);
	background: linear-gradient(transparent, rgb(0 0 0 / 0.8));
}

.ak-feature-title {
	max-width: 18ch;
	font: 700 clamp(2.25rem, 6.5vw, 6rem)/0.95 var(--display);
	text-transform: uppercase;
	text-wrap: balance;
}

.ak-feature-date,
.ak-tile-date {
	font-size: 0.875rem;
	opacity: 0.85;
}

/* ---------- Post grid ---------- */

.ak-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gap);
	padding-top: var(--gap);
	background: var(--dark);
}

.ak-tile {
	grid-column: span 6;
	margin: 0;
}

.ak-tile-link {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #1c1c1c;
	color: var(--paper);
	text-decoration: none;
}

@media (min-width: 600px) {
	.ak-tile {
		grid-column: span 3;
	}

	.ak-tile-link {
		aspect-ratio: 4 / 5;
	}

	.ak-tile--wide .ak-tile-link {
		aspect-ratio: 3 / 2;
	}
}

@media (min-width: 960px) {
	.ak-tile {
		grid-column: span 2;
	}

	.ak-tile--wide {
		grid-column: span 3;
	}
}

.ak-tile-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s;
}

.ak-tile-link:hover .ak-tile-image,
.ak-tile-link:focus-visible .ak-tile-image {
	transform: scale(1.05);
	opacity: 0.85;
}

.ak-tile-text {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 72px clamp(16px, 2vw, 28px) clamp(16px, 2vw, 26px);
	background: linear-gradient(transparent, rgb(0 0 0 / 0.78));
}

.ak-tile-title {
	font: 700 clamp(1.25rem, 2.1vw, 1.875rem)/1.05 var(--display);
	text-transform: uppercase;
	text-wrap: balance;
}

.ak-tile--wide .ak-tile-title {
	font-size: clamp(1.5rem, 3vw, 2.75rem);
}

/* A post with no image at all: a solid color block. */
.ak-tile--no-image .ak-tile-link {
	background: var(--accent);
	color: var(--on-accent);
}

.ak-tile--no-image .ak-tile-text {
	inset: 0;
	justify-content: flex-end;
	background: none;
}

.ak-tile--no-image .ak-label {
	background: var(--dark);
	color: var(--paper);
	color: var(--paper);
}

/* ---------- Pagination ---------- */

.ak-pagination {
	padding: clamp(32px, 5vw, 64px) var(--gutter);
	background: var(--dark);
}

.ak-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.ak-pagination .page-numbers {
	min-width: 48px;
	padding: 10px 14px;
	border: 2px solid #333;
	color: var(--paper);
	font: 700 1.125rem/1.2 var(--display);
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

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

.ak-pagination a.page-numbers:hover {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

.ak-pagination .dots {
	border-color: transparent;
}

/* ---------- Title band (posts, pages, archives) ---------- */

.ak-band {
	padding: clamp(40px, 7vw, 112px) var(--gutter) clamp(32px, 5vw, 72px);
	background: var(--dark);
	color: var(--paper);
}

.ak-band-kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
	color: var(--accent-text);
	font: 500 1rem/1.2 var(--display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ak-band-kicker .ak-label:hover {
	background: var(--paper);
	color: var(--ink);
}

.ak-band-title {
	max-width: 20ch;
	margin: 0;
	font-size: clamp(2.5rem, 7vw, 6.5rem);
	line-height: 0.92;
	overflow-wrap: break-word;
}

.ak-band-meta,
.ak-band-text {
	max-width: 60ch;
	margin: 20px 0 0;
	color: #bdbdbd;
}

.ak-single-image {
	margin: 0;
	background: var(--dark);
	padding: 0 0 clamp(16px, 3vw, 40px);
}

.ak-single-image img {
	display: block;
	width: auto;
	max-height: 88vh;
	margin: 0 auto;
}

.ak-section-title {
	margin: 0;
	padding: clamp(32px, 5vw, 64px) var(--gutter) 20px;
	background: var(--dark);
	color: var(--paper);
	font-size: clamp(1.5rem, 3.5vw, 2.75rem);
}

.ak-adjacent .ak-grid,
.ak-children .ak-grid {
	padding-bottom: var(--gap);
}

/* ---------- Post and page text ---------- */

.ak-content {
	max-width: calc(760px + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) var(--gutter);
	font-size: 1.125rem;
	line-height: 1.7;
}

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

.ak-content h2 {
	margin: 2em 0 0.6em;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.ak-content h3 {
	margin: 1.8em 0 0.5em;
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
}

.ak-content h4,
.ak-content h5,
.ak-content h6 {
	margin: 1.6em 0 0.5em;
	font-size: 1.25rem;
}

.ak-content a {
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ak-content a {
	transition: color 0.15s, text-decoration-thickness 0.15s;
}

/* Coral text on white is only 3.4:1, so hovered links stay dark and get a thick coral underline. */
.ak-content a:hover {
	color: var(--dark);
	text-decoration-thickness: 4px;
}

.ak-content p:empty {
	display: none;
}

.ak-content blockquote {
	margin: 2em 0;
	padding: 0 0 0 24px;
	border-left: 6px solid var(--accent);
	font-size: 1.25rem;
}

.ak-content hr {
	margin: 3em 0;
	border: 0;
	border-top: 4px solid var(--ink);
}

.ak-content figure {
	margin: 2em 0;
}

.ak-content figcaption,
.ak-content .wp-caption-text,
.ak-content .gallery-caption {
	margin-top: 8px;
	color: var(--grey);
	font-size: 0.875rem;
	line-height: 1.5;
}

.ak-content .wp-caption {
	max-width: 100%;
}

.ak-content .alignleft {
	float: left;
	max-width: 50%;
	margin: 0.4em 1.5em 1em 0;
}

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

.ak-content .aligncenter {
	display: block;
	margin-inline: auto;
}

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

/* Galleries and wide blocks run wider than the text. */
.ak-content .gallery,
.ak-content .wp-block-gallery,
.ak-content .alignwide {
	width: min(1200px, 100vw - 2 * var(--gutter));
	max-width: none;
	margin-inline: calc((100% - min(1200px, 100vw - 2 * var(--gutter))) / 2);
}

.ak-content .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

/* Classic [gallery] shortcodes: a square-tile grid that keeps the gallery's column count. */
.ak-content .gallery {
	display: grid;
	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
	gap: 8px;
	margin-block: 2em;
}

.ak-content .gallery-columns-1 { --gallery-columns: 1; }
.ak-content .gallery-columns-2 { --gallery-columns: 2; }
.ak-content .gallery-columns-4 { --gallery-columns: 4; }
.ak-content .gallery-columns-5 { --gallery-columns: 5; }
.ak-content .gallery-columns-6,
.ak-content .gallery-columns-7,
.ak-content .gallery-columns-8,
.ak-content .gallery-columns-9 { --gallery-columns: 6; }

.ak-content .gallery-item {
	margin: 0;
}

.ak-content .gallery-icon a {
	display: block;
}

.ak-content .gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 0 !important; /* WordPress prints a grey border inline for classic galleries. */
}

.ak-content .gallery-columns-1 img {
	aspect-ratio: auto;
}

@media (max-width: 600px) {
	.ak-content .gallery:not(.gallery-columns-1) {
		--gallery-columns: 2;
	}
}

.ak-content iframe {
	max-width: 100%;
}

.ak-content iframe[src*="youtube"],
.ak-content iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

@media (max-width: 600px) {
	.ak-content .alignleft,
	.ak-content .alignright {
		float: none;
		max-width: 100%;
		margin: 1.5em 0;
	}
}

/* Forms (contact form, comments, search). */
.ak-content input[type="text"],
.ak-content input[type="email"],
.ak-content input[type="url"],
.ak-content input[type="search"],
.ak-content textarea,
.ak-content select,
.search-form .search-field {
	max-width: 100%;
	padding: 10px 12px;
	border: 2px solid var(--ink);
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
}

.ak-content input:focus,
.ak-content textarea:focus,
.search-form .search-field:focus {
	border-color: var(--accent);
	outline: none;
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.search-form label {
	flex: 1 1 220px;
}

.search-form .search-field {
	width: 100%;
}

/* ---------- Comments ---------- */

.ak-comments {
	padding-top: 0;
	font-size: 1rem;
}

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

.ak-comments .children {
	padding-left: 24px;
	border-left: 3px solid var(--line);
}

.ak-comments .comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}

.ak-comments .comment-meta {
	font-size: 0.875rem;
	color: var(--grey);
}

.ak-comments .comment-author {
	color: var(--ink);
	font-weight: 700;
}

.ak-comments .avatar {
	float: left;
	margin: 0 12px 0 0;
}

.ak-comments textarea,
.ak-comments input[type="text"],
.ak-comments input[type="email"],
.ak-comments input[type="url"] {
	width: 100%;
}

/* ---------- Footer ---------- */

.ak-footer {
	padding: clamp(48px, 8vw, 112px) var(--gutter) 32px;
	border-top: 8px solid var(--accent);
	background: var(--dark);
	color: var(--paper);
}

.ak-footer-name {
	display: block;
	font: 700 clamp(2.75rem, 10vw, 9rem)/0.88 var(--display);
	text-decoration: none;
	text-transform: uppercase;
}

.ak-footer-roles {
	margin: 16px 0 0;
	color: var(--accent-text);
	font: 500 clamp(1rem, 2vw, 1.375rem)/1.3 var(--display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ak-footer-meta {
	margin: clamp(40px, 6vw, 72px) 0 0;
	color: #a8a8a8;
	font-size: 0.875rem;
}

.ak-footer-meta a:hover {
	color: var(--accent-text);
}

/* ---------- Motion ---------- */

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

	.ak-tile-link:hover .ak-tile-image,
	.ak-feature-link:hover .ak-feature-image {
		transform: none;
	}
}