/* _components/Badge.css */
/*
Badge component from DaisyUI
https://daisyui.com/components/badge
*/

.sl-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition-property:
		color, background-color, border-color, text-decoration-color, fill, stroke,
		opacity, box-shadow, transform, filter, backdrop-filter,
		-webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	transition-duration: 200ms;
	height: 22px;
	font-size: 0.875rem;
	line-height: 20px;
	width: -moz-fit-content;
	width: fit-content;
	padding-left: 0.563rem;
	padding-right: 0.563rem;
	border: 1px solid var(--badge-bg);
	border-radius: 4px;
	color: var(--badge-text);
	background-color: var(--badge-bg);
}

/* _components/now/card.css */
/*
Shared base styling for the "Adesso" (/now) widget cards.
Each widget imports this file plus its own sibling stylesheet.
*/

.now-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	height: 100%;
	padding: var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--sp-05);
	background-color: var(--bg-neutral);
	color: var(--text-base-content);
	transition:
		transform 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease;
}

.now-card:hover {
	transform: translateY(-2px);
	border-color: var(--primary);
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.25);
}

/* Editorial kicker shared by every widget header. */
.now-card > .now-card-kicker {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
}

.now-card a {
	color: var(--primary);
	text-decoration: none;
	transition: color 150ms ease;
}

.now-card a:hover {
	color: var(--header-link-hover);
}

.now-card svg {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	color: var(--text-secodary-content);
}

@media (prefers-reduced-motion: reduce) {
	.now-card,
	.now-card:hover {
		transform: none;
		transition: none;
	}
}

/* _components/BackToTop.css */
.back-to-top {
	position: fixed;
	bottom: var(--sp-4);
	right: var(--sp-4);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--badge-text);
	background-color: var(--primary);
	border: none;
	border-radius: 9999px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-to-top:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.back-to-top:focus-visible {
	outline: 2px solid var(--text-base-content);
	outline-offset: 2px;
}

.back-to-top svg {
	width: 1rem;
	height: 1rem;
}

/* Enter/leave fade + slide. */
.back-to-top-enter-active,
.back-to-top-leave-active {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-top-enter-from,
.back-to-top-leave-to {
	opacity: 0;
	transform: translateY(0.5rem);
}

@media (max-width: 480px) {
	.back-to-top span {
		/* Keep just the icon on narrow viewports to stay out of the way. */
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.back-to-top {
		padding: var(--sp-3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top,
	.back-to-top-enter-active,
	.back-to-top-leave-active {
		transition: none;
	}

	.back-to-top:hover {
		transform: none;
	}
}

/* _components/BookDialog.css */
.book-dialog {
	position: relative;
	width: min(36rem, calc(100vw - var(--sp-4)));
	margin: auto;
	padding: var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--sp-05);
	background-color: var(--bg-neutral);
	color: var(--text);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.book-dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
}

.book-dialog__close {
	position: absolute;
	top: var(--sp-2);
	right: var(--sp-2);
	width: var(--sp-4);
	height: var(--sp-4);
	border: 1px solid var(--border);
	border-radius: 50%;
	background-color: transparent;
	color: var(--text-secodary-content);
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease;
}

.book-dialog__close:hover {
	color: var(--primary);
	border-color: var(--primary);
}

.book-dialog > h2 {
	margin: 0 var(--sp-5) 0 0;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--text-base-content);
}

/* Same editorial kicker treatment as the device cards. */
.book-dialog__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin: var(--sp-1) 0 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
}

.book-dialog__meta > span + span::before {
	content: "·";
	margin-right: var(--sp-1);
}

.book-dialog__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	margin-top: var(--sp-2);
	color: var(--primary);
	font-size: 0.875rem;
	text-decoration: none;
}

.book-dialog__link:hover {
	text-decoration: underline;
}

.book-dialog__link svg {
	width: 0.75rem;
	height: 0.75rem;
}

.book-dialog > hr {
	margin: var(--sp-3) 0;
	border: 0;
	border-top: 1px solid var(--border);
}

.book-dialog p {
	line-height: 1.7;
}

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

/* _components/BookSpine.css */
/* One book seen from the side. Size and colour arrive as custom properties from
   `spineStyle()` in src/utils/books.ts.

   The depth here is tonal, not skeuomorphic. A classical binding is drawn with
   grey and white laid over the colour to fake a moulded, rounded surface; this
   sweep is mixed from the book's own colour instead, so the spine turns like a
   solid object while staying a flat-ish graphic panel. The lighter end sits on
   the left, where the text is, giving that edge more presence. */
.book-spine {
	position: relative;
	width: var(--book-width);
	height: var(--book-height);
	padding: var(--sp-1) var(--sp-05);
	border: 0;
	border-radius: 2px;
	color: var(--book-ink);
	font-family: inherit;
	cursor: pointer;
	overflow: hidden;
	background-color: var(--book-color);
	background-image: linear-gradient(
		to right,
		var(--book-lit),
		var(--book-color) 45%,
		var(--book-shade)
	);
	box-shadow:
		/* Crisp lit and shaded edges. These sit in the 4px padding, clear of the
		   text, so they add definition without touching its contrast — and the
		   shaded one is what separates two same-coloured neighbours. */
		inset 1px 0 0 rgba(255, 255, 255, 0.14),
		inset -1px 0 0 rgba(0, 0, 0, 0.25),
		/* Where the book meets the plank. */
		inset 0 -2px 0 rgba(0, 0, 0, 0.16),
		/* Soft ambient elevation rather than a hard drop shadow. */
		0 3px 8px -2px rgba(0, 0, 0, 0.35);
	transition:
		transform 200ms ease,
		box-shadow 200ms ease;
}

/* Rotation lives on the inner span, not the button, so the button's own
   transform stays free for the hover lift.
   In this writing mode the inline axis runs along the spine's length, so a
   `column` flex direction stacks the two items across its thickness — giving
   title and author a line each, with the spine's full length available to
   both. Sharing one line would make them compete for it and truncate.

   Both axes start-align, which after the 180° rotation puts the text in the
   bottom-left corner reading upward: `justify-content` runs along the block
   axis (across the thickness, so flex-start lands on the left edge) and
   `align-items` along the inline axis (the length, so flex-start is the
   bottom). Centring on either axis would float the text mid-spine. */
.book-spine__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--sp-05);
	width: 100%;
	height: 100%;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* No ellipsis and no nowrap on either line: both are meant to be read in full,
   and the height/width tiers in src/utils/books.ts are sized so they fit. */
.book-spine__title {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.book-spine__author {
	font-size: 0.62rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.78;
}

/* Pulled half out of the shelf: the elevation deepens with the lift, keeping
   the contact line so the book still reads as a solid slab. */
.book-spine:hover {
	transform: translateY(-10px);
	box-shadow:
		inset 1px 0 0 rgba(255, 255, 255, 0.14),
		inset -1px 0 0 rgba(0, 0, 0, 0.25),
		inset 0 -2px 0 rgba(0, 0, 0, 0.16),
		0 14px 22px -8px rgba(0, 0, 0, 0.5);
}

.book-spine:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
	transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
	.book-spine,
	.book-spine:hover,
	.book-spine:focus-visible {
		transform: none;
		transition: none;
	}
}

/* _components/Coffee.css */
a.coffee {
	display: flex;
	padding: var(--sp-2) var(--sp-4);
	gap: var(--sp-1);
	justify-content: center;
	align-items: center;
	border-radius: var(--sp-1);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--white);
	text-decoration: none;
	background: var(--primary);
}

a.coffee:hover {
	color: var(--white);
	background: color-mix(in srgb, var(--primary), black 15%);
}

a.coffee svg {
	display: flex;
	align-items: center;
}

/* _components/Container.css */
section.container {
	overflow: hidden;
	color: var(--text);
}

section.container > div {
	margin: 0 auto;
	padding: var(--sp-8) var(--sp-3);
	max-width: 64rem;
}

/* _components/DeviceCard.css */
article.device-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: var(--sp-05);
	background-color: var(--bg-neutral);
	overflow: hidden;
	transition:
		transform 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease;
}

article.device-card:hover {
	transform: translateY(-2px);
	border-color: var(--primary);
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.25);
}

article.device-card figure {
	padding: var(--sp-3);
	background-color: var(--white);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	margin: 0;
}

article.device-card figure img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

article.device-card > div {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-3);
	color: var(--text-base-content);
}

/* Tag row + acquisition date as editorial kicker captions. */
article.device-card > div > div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

article.device-card > div > p {
	flex: none;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
}

article.device-card > div > h2 {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.25;
}

article.device-card > div > h2 > a {
	color: var(--text-base-content);
	text-decoration: none;
	transition: color 150ms ease;
}

article.device-card > div > h2 > a:hover {
	color: var(--primary);
}

article.device-card > div > h2 svg {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	color: var(--text-secodary-content);
}

@media (prefers-reduced-motion: reduce) {
	article.device-card,
	article.device-card:hover {
		transform: none;
		transition: none;
	}
}

/* _components/Footer.css */
.footer {
	color: var(--text);
	border-top: 1px solid var(--border);
}

.footer > div {
	display: flex;
	padding: var(--sp-4) var(--sp-3);
	flex-direction: column;
	align-items: center;
	max-width: 64rem;
	margin: 0 auto;
	justify-content: center;
	gap: var(--sp-3);
}

@media (min-width: 640px) {
	.footer > div {
		flex-direction: row;
	}
}

.footer > div > span {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.75rem;
	letter-spacing: -0.01em;
	color: var(--text-base-content);
}

.footer > div > p {
	display: flex;
	margin: var(--sp-2) 0 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--text-content-dark);
}

@media (min-width: 640px) {
	.footer > div > p {
		padding: var(--sp-1) 0 var(--sp-1) var(--sp-2);
		margin-top: 0;
		border-left-width: 2px;
	}
}

.footer > div > p a {
	margin-left: 0.25rem;
	color: var(--primary);
}

.footer > div > .social {
	display: flex;
	margin-top: var(--sp-2);
	gap: 0.75rem;
	justify-content: center;
	width: 9rem;
}

@media (min-width: 640px) {
	.footer > div > .social {
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.footer > div > .social {
		justify-content: flex-end;
	}
}

.footer > div > .social > a {
	color: var(--text-base-content) !important;
}

.footer > div > .social > a svg {
	width: 1.25rem;
	height: 1.25rem;
}

.footer > div > .social a:hover {
	color: var(--primary);
}

/* _components/GamingPlatforms.css */
p.gaming-platforms.platforms {
	margin-top: 0;
}

p.gaming-platforms.platforms a {
	margin: 0 var(--sp-05);
	text-decoration: none;
	color: white;
}

/* _components/HalloweenSection.css */
.halloween-section {
	margin-top: var(--sp-5);
}

.halloween-section > h2 {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
	color: var(--text-base-content);
}

.halloween-section > h2 > span {
	line-height: 1;
}

.halloween-section .halloween-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top-width: 0;
}

.halloween-section .halloween-chips > li {
	margin: 0;
	padding: 0;
	font-size: inherit;
	list-style: none;
}

.halloween-section .halloween-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-1) var(--sp-2);
	border: 1px solid var(--border);
	border-radius: var(--sp-05);
	background-color: var(--bg-neutral);
	color: var(--text-base-content);
	text-decoration: none;
	line-height: 1.3;
	transition:
		transform 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease;
}

.halloween-section button.halloween-chip {
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.halloween-section button.halloween-chip::after {
	content: "";
	flex: none;
	width: 0.4em;
	height: 0.4em;
	border-right: 2px solid var(--text-secodary-content);
	border-bottom: 2px solid var(--text-secodary-content);
	transform: translateY(-0.1em) rotate(45deg);
	transition: transform 260ms ease;
}

.halloween-section button.halloween-chip.open::after {
	transform: translateY(0.05em) rotate(225deg);
}

.halloween-section .halloween-chip:hover {
	transform: translateY(-2px);
	border-color: var(--primary);
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.25);
}

.halloween-section .halloween-chip:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.halloween-section .halloween-chip.featured,
.halloween-section .halloween-chip.open {
	border-color: var(--primary);
	box-shadow: inset 0 0 0 1px var(--primary);
}

.halloween-section .halloween-chip .chip-title {
	font-weight: 500;
}

.halloween-section .halloween-chip svg {
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	color: var(--text-secodary-content);
}

.halloween-section .halloween-accordion-wrap {
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
}

.halloween-section .halloween-accordion-clip {
	overflow: hidden;
	min-height: 0;
}

.halloween-section .halloween-accordion {
	margin: var(--sp-2) 0 0;
	padding: var(--sp-2);
	border-left: 3px solid var(--primary);
	border-radius: 0 var(--sp-05) var(--sp-05) 0;
	background-color: var(--bg-neutral);
	color: var(--text-base-content);
	font-size: 1rem;
	animation: halloween-accordion-swap 200ms ease;
}

@keyframes halloween-accordion-swap {
	from {
		opacity: 0;
		transform: translateY(-2px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.halloween-accordion-enter-active,
.halloween-accordion-leave-active {
	transition:
		grid-template-rows 260ms ease,
		opacity 260ms ease;
}

.halloween-accordion-enter-from,
.halloween-accordion-leave-to {
	grid-template-rows: 0fr;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.halloween-section .halloween-chip,
	.halloween-section .halloween-chip:hover {
		transform: none;
		transition: none;
	}

	.halloween-section button.halloween-chip::after {
		transition: none;
	}

	.halloween-section .halloween-accordion {
		animation: none;
	}

	.halloween-accordion-enter-active,
	.halloween-accordion-leave-active {
		transition: none;
	}
}

/* _components/Header.css */
.header {
	color: var(--text-base-content);
	border-bottom: 1px solid var(--border);
}

.header > div {
	display: flex;
	padding: var(--sp-3);
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	max-width: 64rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.header > div {
		flex-direction: row;
	}
}

.header > div > a {
	display: flex;
	margin-bottom: var(--sp-2);
	align-items: center;
	font-weight: 500;
	color: var(--text-base-content);
}

@media (min-width: 768px) {
	.header > div > a {
		margin-bottom: 0;
	}
}

.header > div > a img {
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--white);
	border: 2px solid var(--primary);
	transition: box-shadow 0.2s ease-in-out;
}

.header > div > a img:hover {
	box-shadow: 0 0 5px var(--primary);
}

.header > div > a span {
	margin-left: var(--sp-2);
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.75rem;
	letter-spacing: -0.01em;
}

.header > div > nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5rem;
	gap: var(--sp-3);
	justify-content: center;
}

@media (min-width: 768px) {
	.header > div > nav {
		margin-left: auto;
	}
}

.header > div > nav > a.navitem {
	color: var(--text-base-content);
	transition: color 150ms ease;
}

.header > div > nav > a.navitem:hover {
	color: var(--header-link-hover);
	text-decoration: underline;
}

.header > div > nav > a.router-link-active {
	text-decoration: underline;
}

.header > div > nav a#theme {
	padding-top: 0;
	width: 1.5rem;
	height: 1.5rem;
	cursor: pointer;
}

.header > div > nav a#theme svg {
	width: 1.5rem;
	height: 1.5rem;
	transition: transform 0.3s ease;
}

/* Micro-interaction: rotate the sun/moon icon on hover/focus. */
.header > div > nav a#theme:hover svg,
.header > div > nav a#theme:focus-visible svg {
	transform: rotate(20deg);
}

.header > div > nav > a.event-nav {
	transform: scale(1.7);
}

@media (prefers-reduced-motion: reduce) {
	.header > div > nav a#theme svg {
		transition: none;
	}

	.header > div > nav a#theme:hover svg,
	.header > div > nav a#theme:focus-visible svg {
		transform: none;
	}
}

/* _components/Outdated.css */
div.outdated {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: auto minmax(auto, 1fr);
	gap: var(--sp-2);
	align-items: start;
	width: 100%;
	margin: var(--sp-5) 0;
	padding: var(--sp-3);
	background-color: var(--bg-neutral);
	border-left: 3px solid var(--primary);
	color: var(--text-base-content);
	text-align: start;
	line-height: 1.6;
}

div.outdated svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke: var(--primary);
	margin-top: 0.1em;
}

div.outdated strong {
	display: inline;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary);
}

/* _components/PWAInstallBanner.css */
.pwa-banner {
	position: fixed;
	bottom: var(--sp-2);
	left: var(--sp-2);
	right: var(--sp-2);
	z-index: 1000;
	max-width: 28rem;
	margin: 0 auto;
}

.banner-content {
	background: var(--bg-neutral);
	border: 1px solid var(--border);
	border-left: 3px solid var(--primary);
	border-radius: var(--sp-05);
	padding: var(--sp-2);
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	backdrop-filter: blur(8px);
	position: relative;
}

.banner-info {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex: 1;
	min-width: 0;
}

.banner-icon {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	background: var(--primary);
	border-radius: var(--sp-05);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
}

.banner-icon svg {
	width: 1rem;
	height: 1rem;
}

.banner-text {
	flex: 1;
	min-width: 0;
}

.banner-text h4 {
	margin: 0 0 var(--sp-05) 0;
	font-family: var(--font-serif);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-base-content);
	line-height: 1.3;
}

.banner-text p {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
	line-height: 1.4;
}

.banner-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	flex-shrink: 0;
}

.install-btn {
	background: var(--primary);
	color: var(--white);
	border: none;
	border-radius: var(--sp-05);
	padding: var(--sp-05) var(--sp-2);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
	white-space: nowrap;
}

.install-btn:hover {
	background: var(--header-link-hover);
	transform: translateY(-1px);
}

.install-btn:active {
	transform: translateY(0);
}

.ios-hint {
	display: flex;
	align-items: center;
	gap: var(--sp-05);
	font-size: 0.7rem;
	color: var(--text-secodary-content);
	max-width: 4rem;
	text-align: center;
}

.ios-hint span {
	white-space: nowrap;
}

.ios-hint svg {
	width: 0.75rem;
	height: 0.75rem;
	color: var(--primary);
	flex-shrink: 0;
}

.dismiss-btn {
	background: none;
	border: none;
	color: var(--text-secodary-content);
	cursor: pointer;
	padding: var(--sp-05);
	border-radius: 50%;
	transition: background-color 150ms ease, color 150ms ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1;
}

.dismiss-btn svg {
	width: 1rem;
	height: 1rem;
}

.dismiss-btn:hover {
	background: var(--bg);
	color: var(--text-base-content);
}

/* Animations */
.banner-enter-active {
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.banner-leave-active {
	transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
}

.banner-enter-from {
	opacity: 0;
	transform: translateY(100%) scale(0.9);
}

.banner-leave-to {
	opacity: 0;
	transform: translateY(50px) scale(0.95);
}

.banner-enter-to,
.banner-leave-from {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Responsive */
@media (max-width: 640px) {
	.pwa-banner {
		bottom: var(--sp-1);
		left: var(--sp-1);
		right: var(--sp-1);
	}

	.banner-content {
		padding: var(--sp-1) var(--sp-2);
		gap: var(--sp-1);
	}

	.banner-info {
		gap: var(--sp-1);
	}

	.banner-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.banner-icon svg {
		width: 0.875rem;
		height: 0.875rem;
	}

	.banner-text h4 {
		font-size: 0.8rem;
	}

	.banner-text p {
		font-size: 0.7rem;
	}

	.install-btn {
		padding: var(--sp-05) var(--sp-1);
		font-size: 0.7rem;
	}

	.ios-hint {
		font-size: 0.65rem;
		max-width: 3rem;
	}

	.dismiss-btn {
		width: 1.25rem;
		height: 1.25rem;
	}

	.dismiss-btn svg {
		width: 0.875rem;
		height: 0.875rem;
	}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.install-btn,
	.install-btn:hover,
	.install-btn:active {
		transform: none;
		transition: none;
	}

	.banner-enter-active,
	.banner-leave-active {
		transition: none;
	}

	.banner-enter-from,
	.banner-leave-to {
		transform: none;
	}
}

/* _components/Pagination.css */
div.pagination {
	padding-top: var(--sp-3);
	padding-bottom: var(--sp-4);
	margin-top: 0.5rem;
}

@media (min-width: 768px) {
	div.pagination {
		margin-top: var(--sp-2);
	}
}

div.pagination nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

div.pagination nav > a {
	opacity: 1;
	color: var(--primary);
}

div.pagination nav > a > button {
	color: var(--primary);
}

div.pagination nav button {
	color: var(--text-base-content);
	background-color: transparent;
	border: 0;
	cursor: pointer;
	transition: all 0.3s ease;
	padding: var(--sp-1) var(--sp-2);
	border-radius: 2px;
}

div.pagination nav button:hover {
	color: var(--white);
	background-color: var(--primary);
}

div.pagination nav > button:disabled {
	opacity: 0.4;
}

/* _components/PostPreview.css */
li.post-preview {
	display: flex;
	padding: var(--sp-4) 0;
	flex-wrap: wrap;
	position: relative;
	border-bottom: 1px solid var(--border);
}

/* Restrained editorial "featured" treatment — a warm tint panel with a single
   accent rule, replacing the former pulsing purple borders. */
li.post-preview.pinned {
	margin: var(--sp-4) 0;
	padding: var(--sp-3);
	border: 0;
	border-bottom: 1px solid var(--border);
	border-left: 3px solid var(--primary);
	background-color: var(--bg-neutral);
}

/*
 * The badge is a sibling of <time>, so in the nowrap flex row it would be laid
 * out *beside* the date and the two collide. Pinned previews use a grid
 * instead: the badge takes a full-width row of its own above the date/body
 * columns, which keeps the date and title aligned exactly as in a normal row.
 */
li.post-preview.pinned {
	display: grid;
	grid-template-columns: 1fr;
	align-content: start;
}

/*
 * The chip is the one element allowed to shout on the page: a filled accent
 * pill with a diamond marker, so a pinned post reads as deliberate rather than
 * as a slightly darker row. Sizing stays in the same small-caps key as the
 * date and tag captions it sits above.
 */
li.post-preview.pinned .badge {
	position: static;
	grid-column: 1 / -1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	margin-bottom: var(--sp-3);
	padding: var(--sp-05) var(--sp-2);
	border-radius: 999px;
	background-color: var(--badge-bg);
	color: var(--badge-text);
	cursor: help;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Decorative marker — empty content keeps it out of the accessibility tree. */
li.post-preview.pinned .badge::before {
	content: "";
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	background-color: currentColor;
	transform: rotate(45deg);
}

@media (min-width: 768px) {
	li.post-preview.pinned {
		grid-template-columns: 14rem 1fr;
	}

	li.post-preview.pinned > time {
		width: auto;
	}
}

@media (min-width: 768px) {
	li.post-preview {
		flex-wrap: nowrap;
	}
}

li.post-preview > time {
	display: flex;
	margin-bottom: var(--sp-2);
	flex-direction: column;
}

@media (min-width: 768px) {
	li.post-preview > time {
		margin-bottom: 0;
		width: 16rem;
	}
}

/* Date rendered as an editorial kicker caption. */
li.post-preview > time span {
	margin-top: var(--sp-05);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
}

li.post-preview > div:last-child {
	width: 100%;
}

@media (min-width: 768px) {
	li.post-preview > div:last-child {
		flex-grow: 1;
	}
}

li.post-preview > div:last-child h2 {
	margin-top: 0;
	margin-bottom: var(--sp-2);
	font-size: 1.6rem;
	line-height: 1.25;
	color: var(--text-base-content);
}

li.post-preview > div:last-child > div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-2);
}

li.post-preview > div:last-child > div > a {
	font-size: 0.75rem;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
	transition: color 150ms ease;
}

li.post-preview > div:last-child > div > a:hover {
	color: var(--primary);
	text-decoration: none;
}

li.post-preview > div:last-child p {
	margin-top: var(--sp-2);
	line-height: 1.7;
	color: var(--text);
}

li.post-preview > div:last-child > a:last-child {
	display: inline-flex;
	margin-top: var(--sp-3);
	align-items: center;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary);
}

li.post-preview > div:last-child > a:last-child svg {
	margin-left: var(--sp-1);
	width: 1rem;
	height: 1rem;
	transition: transform 150ms ease;
}

/* Micro-interaction: nudge the "continua a leggere" arrow on hover/focus. */
li.post-preview > div:last-child > a:last-child:hover svg,
li.post-preview > div:last-child > a:last-child:focus-visible svg {
	transform: translateX(4px);
}

/*
 * Scroll-reveal: fade + rise each post as it scrolls into view, using the
 * native CSS scroll-driven animations API. Guarded by @supports so browsers
 * without it (and SSR first paint) simply render the content statically, and
 * by prefers-reduced-motion so reduced-motion users get no reveal.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		@keyframes post-reveal {
			from {
				opacity: 0;
				transform: translateY(16px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		li.post-preview:not(.pinned) {
			animation: post-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 25%;
		}
	}
}

/* _components/PostsList.css */
ul.posts-list {
	border-top: 1px solid var(--border);
	margin: var(--sp-4) 0;
	padding: 0;
	/* Positioning context so search-filtered items (position: absolute while
	   leaving) anchor here and animate out cleanly instead of jumping. */
	position: relative;
}

/* _components/Published.css */
div.published {
	margin: 0 0 var(--sp-1);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
}

/* _components/ReadingTime.css */
p.reading-time.reading {
	margin: var(--sp-2) 0 0;
}

p.reading-time.reading small {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
}

/* _components/Search.css */
form.search {
	margin: var(--sp-5) 0;
}

form.search div {
	display: flex;
	align-items: center;
}

form.search input {
	width: 100%;
	border-color: var(--primary);
	appearance: none;
	height: 3rem;
	padding-left: var(--sp-2);
	padding-right: var(--sp-2);
	font-size: 1rem;
	line-height: 1.5rem;
	border: 1px solid var(--primary);
}

@media (min-width: 768px) {
	form.search input {
		max-width: 36rem;
	}
}

form.search input:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	border-color: var(--text-secondary-content);
}

form.search input {
	transition: box-shadow 0.2s ease;
}

form.search input:focus {
	box-shadow: 0 2px 12px -4px var(--primary);
	border-color: var(--primary);
	outline: var(--primary);
	outline-style: solid;
	outline-width: 2px;
	outline-offset: 2px;
}

form.search svg {
	width: 1.5rem;
	height: 1.5rem;
}

form.search button {
	display: inline-flex;
	padding: 0;
	width: 3rem;
	height: 3rem;
	min-height: 3rem;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	color: var(--text-base-content);
	background-color: oklch(0.93 0 0);
}

/* Clear button fades + scales in/out instead of popping. */
.clear-enter-active,
.clear-leave-active {
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

.clear-enter-from,
.clear-leave-to {
	opacity: 0;
	transform: scale(0.6);
}

/* Result count pops gently when the number changes (paired with mode="out-in"). */
.count-enter-active,
.count-leave-active {
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
	display: inline-block;
}

.count-enter-from {
	opacity: 0;
	transform: translateY(-0.4em);
}

.count-leave-to {
	opacity: 0;
	transform: translateY(0.4em);
}

@media (prefers-reduced-motion: reduce) {
	form.search input,
	.clear-enter-active,
	.clear-leave-active,
	.count-enter-active,
	.count-leave-active {
		transition: none;
	}
}

/* _components/Sharing.css */
.sharing {
	display: flex;
	flex-direction: column;
	padding: var(--sp-1) 0 var(--sp-3);
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

@media screen and (min-width: 768px) {
	.sharing {
		flex-direction: row;
		align-items: start;
	}
}

.sharing a {
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}

.sharing a:hover {
	color: var(--primary);
}

.sharing span {
	display: inline-block;
	padding: 0 var(--sp-1);
}

/* _components/Tip.css */
.tip-section {
	border-top-width: 0 !important;
	margin: 0 auto;
}

.tip-text {
	margin-bottom: var(--sp-2);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-style: italic;
}

.tip-text span {
	font-style: normal;
}

.tip-action {
	margin: 0 auto;
}

@media (min-width: 768px) {
	.tip-action {
		width: max-content;
	}
}

/* Screen reader only content */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* _components/content/Timeline.css */
.timeline-container {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: var(--sp-4) var(--sp-2);
}

.timeline {
	--timeline-dot-border: var(--border);

	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

.timeline::before {
	content: "";
	position: absolute;
	left: var(--sp-3);
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(
		180deg,
		var(--primary, #3b82f6) 0%,
		var(--primary, #3b82f6) 50%,
		rgba(203, 213, 225, 0.3) 100%
	);
	border-radius: 2px;
}

.timeline-item {
	position: relative;
	padding: var(--sp-3) 0 var(--sp-3) var(--sp-8);
	margin: 0;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0.8;
	cursor: pointer;
	outline: none;
	border-radius: 8px;
}

.timeline-item:hover,
.timeline-item:focus {
	opacity: 1;
	transform: translateX(var(--sp-1));
}

.timeline-item:focus {
	outline: 2px solid var(--primary, #3b82f6);
	outline-offset: 2px;
}

.timeline-item::before {
	content: "";
	position: absolute;
	left: 19.5px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background: linear-gradient(135deg, var(--primary, #3b82f6), #1d4ed8);
	border: 3px solid var(--timeline-dot-border, #f5f1eb);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
}

.timeline-item:hover::before,
.timeline-item:focus::before {
	transform: translateY(-50%) scale(1.3);
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
	background: linear-gradient(135deg, #1d4ed8, var(--primary, #3b82f6));
}

.timeline-content {
	background: var(--timeline-item-bg, #fefcf8);
	border-radius: 12px;
	padding: var(--sp-3) var(--sp-3);
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(226, 232, 240, 0.8);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.timeline-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary, #3b82f6), #1d4ed8);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item:hover .timeline-content,
.timeline-item:focus .timeline-content {
	transform: translateY(-2px);
	box-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
	border-color: var(--primary, #3b82f6);
}

.timeline-item:hover .timeline-content::before,
.timeline-item:focus .timeline-content::before {
	transform: scaleX(1);
}

.timeline-text {
	display: block;
	font-size: 1rem;
	font-weight: 500;
	color: #1f2937;
	line-height: 1.6;
	letter-spacing: 0.01em;
	transition: color 0.3s ease;
}

.timeline-item:hover .timeline-text,
.timeline-item:focus .timeline-text {
	color: var(--primary, #3b82f6);
}

/* Screen reader only content */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Responsive design */
@media (max-width: 640px) {
	.timeline-container {
		padding: var(--sp-2) var(--sp-1);
	}

	.timeline::before {
		left: var(--sp-2);
	}

	.timeline-item {
		padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
	}

	.timeline-item::before {
		left: 11.5px;
		top: 50%;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
	}

	.timeline-content {
		padding: var(--sp-2) var(--sp-2);
		border-radius: var(--sp-1);
	}

	.timeline-text {
		font-size: 0.9rem;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.timeline-title {
		color: var(--text-primary, #f9fafb);
	}

	.timeline-description {
		color: var(--text-secondary, #d1d5db);
	}

	.timeline-content {
		background: var(--timeline-item-bg, #2d3748);
		border-color: rgba(55, 65, 81, 0.8);
	}

	.timeline-text {
		color: #f9fafb;
	}

	.timeline-item:hover .timeline-text,
	.timeline-item:focus .timeline-text {
		color: #60a5fa;
	}

	.timeline-item::before {
		border-color: var(--timeline-dot-border, #68717d);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.timeline-item,
	.timeline-item::before,
	.timeline-content,
	.timeline-content::before,
	.timeline-text {
		transition: none;
		animation: none;
	}

	.timeline-item:hover,
	.timeline-item:focus {
		transform: none;
	}

	.timeline-item:hover::before,
	.timeline-item:focus::before {
		transform: translateY(-50%);
	}

	.timeline-item:hover .timeline-content,
	.timeline-item:focus .timeline-content {
		transform: none;
	}

	.timeline-item:hover .timeline-content::before,
	.timeline-item:focus .timeline-content::before {
		transform: scaleX(1);
	}
}

/* Animation for initial load - only if motion is not reduced */
@media (prefers-reduced-motion: no-preference) {
	.timeline-item {
		animation: fadeInUp 0.6s ease-out forwards;
		animation-delay: calc(var(--index, 0) * 0.1s);
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

		to {
			opacity: 0.8;
			transform: translateY(0);
		}
	}

	/* Add index-based animation delay */
	.timeline-item:nth-child(1) {
		--index: 0;
	}

	.timeline-item:nth-child(2) {
		--index: 1;
	}

	.timeline-item:nth-child(3) {
		--index: 2;
	}

	.timeline-item:nth-child(4) {
		--index: 3;
	}

	.timeline-item:nth-child(5) {
		--index: 4;
	}

	.timeline-item:nth-child(6) {
		--index: 5;
	}

	.timeline-item:nth-child(7) {
		--index: 6;
	}

	.timeline-item:nth-child(8) {
		--index: 7;
	}

	.timeline-item:nth-child(9) {
		--index: 8;
	}

	.timeline-item:nth-child(10) {
		--index: 9;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.timeline-item::before {
		border-width: 2px;
		border-color: #000;
	}

	.timeline-content {
		border-width: 2px;
		border-color: #000;
	}

	.timeline-item:focus {
		outline-width: 3px;
	}
}

/* _components/now/Event.css */
article.now-event > h2 {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.2;
}

article.now-event > h2 a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
}

article.now-event .now-event-date {
	margin: 0;
	color: var(--text-secodary-content);
}

/* _components/now/Github.css */
article.now-github .now-github-state {
	margin: 0;
	color: var(--text-secodary-content);
}

article.now-github > ul {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

article.now-github li {
	display: flex;
	flex-direction: column;
	gap: var(--sp-05);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--border);
}

article.now-github li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

article.now-github li > a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-05);
	font-size: 1.1rem;
	font-weight: 600;
}

article.now-github .now-github-desc {
	margin: 0;
	font-size: 0.9rem;
	color: var(--text-secodary-content);
}

/* _components/now/Watching.css */
article.now-watching > ul {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

article.now-watching li {
	display: flex;
	flex-direction: column;
	gap: var(--sp-05);
}

article.now-watching .now-watching-type {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
}

article.now-watching li a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-05);
	font-size: 1.15rem;
	font-weight: 600;
}

/* _components/now/Weather.css */
article.now-weather {
	align-items: flex-start;
}

article.now-weather .now-weather-state {
	margin: 0;
	color: var(--text-secodary-content);
}

article.now-weather .now-weather-emoji {
	margin: 0;
	font-size: 3rem;
	line-height: 1;
}

article.now-weather .now-weather-temp {
	margin: 0;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--text-base-content);
}

article.now-weather .now-weather-meta {
	margin: 0;
	color: var(--text-secodary-content);
}

/* _components/now/Work.css */
article.now-work > h2 {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--text-base-content);
}

article.now-work .now-work-company {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--primary);
}

article.now-work .now-work-city {
	margin: 0;
	color: var(--text-secodary-content);
}

/* _includes/css/about-page.css */
.about-page article {
	max-width: none;
}

.about-page article h1 {
	line-height: 1;
}

@media (min-width: 768px) {
	.about-page article h1 {
		line-height: 1;
	}
}

.about-page article a {
	color: var(--primary);
}

/* _includes/css/books-page.css */
.books-page > h1 {
	color: var(--text-base-content);
}

.books-page > p {
	max-width: 40rem;
	margin-top: var(--sp-3);
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--text);
}

.books-page > p:first-of-type {
	margin-top: var(--sp-4);
}

/* The shelf.
 *
 * Wrapping is plain flex-wrap — given the newest-first order, a full row simply
 * pushes the older books onto the next shelf. The planks are a single repeating
 * gradient on the container, which only lines up if every row is exactly one
 * plank pitch tall; that is what the fixed-height slots below are for. A flex
 * row otherwise sizes to its tallest item and would drift out of step with the
 * gradient after the first row. */
.shelf {
	/* Sized so the longest realistic title fits along the shortest spine
	   without being cut — see SPINE_HEIGHTS in src/utils/books.ts. */
	--shelf-row: 20rem;
	--shelf-plank: 10px;

	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	/* Rows must tile exactly against the gradient: spacing lives on the slots. */
	gap: 0;
	margin: var(--sp-5) 0 0;
	padding: 0 var(--sp-2);
	list-style: none;
	border: 1px solid var(--border);
	border-radius: var(--sp-05);
	background-color: var(--bg-neutral);
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0 calc(var(--shelf-row) - var(--shelf-plank)),
		var(--border) calc(var(--shelf-row) - var(--shelf-plank)) var(--shelf-row)
	);
}

.shelf__slot {
	display: flex;
	align-items: flex-end;
	height: var(--shelf-row);
	padding: 0 2px var(--shelf-plank);
}

/* Only the shelf's own padding shrinks on small screens. The spines keep their
   size: a book has to stay tall and thick enough to hold its title and author
   in full, and that requirement does not change with the viewport. */
@media (max-width: 767px) {
	.shelf {
		--shelf-plank: 8px;

		padding: 0 var(--sp-1);
	}
}

/* _includes/css/devices-page.css */
.devices-page > h1 {
	color: var(--text-base-content);
}

.devices-page > p {
	max-width: 40rem;
	margin-top: var(--sp-3);
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--text);
}

.devices-page > p:first-of-type {
	margin-top: var(--sp-4);
}

.devices-page > ul {
	display: grid;
	margin: var(--sp-5) 0 0;
	padding: 0;
	gap: var(--sp-3);
	border-top-width: 0px;
}

@media (min-width: 768px) {
	.devices-page > ul {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.devices-page ul.multi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.devices-page ul.multi {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* _includes/css/halloween-page.css */
.halloween-page iframe {
	width: 100%;
	height: 450px;
	border: 1px solid var(--border);
}

/* _includes/css/home-page.css */
/* Editorial standfirst: the site description as a serif intro line. */
.home-page > p {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.4;
	color: var(--text-base-content);
}

@media (min-width: 768px) {
	.home-page > p {
		font-size: 2rem;
	}
}

.home-page > section {
	display: flex;
	justify-content: flex-end;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5rem;
}

/* _includes/css/now-page.css */
section.now-page > hgroup {
	margin-bottom: var(--sp-5);
}

section.now-page > hgroup > h1 {
	margin: 0 0 var(--sp-1);
}

section.now-page > hgroup > p {
	margin: 0;
	max-width: 42rem;
	color: var(--text-secodary-content);
}

/* Mobile first: single column, source order. */
.now-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3);
}

/* Bento layout from the md breakpoint up: a tall GitHub column on the left,
   stacked cards on the right. */
@media (min-width: 768px) {
	.now-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"work    weather"
			"github  watching"
			"github  event";
	}

	.now-grid-work {
		grid-area: work;
	}

	.now-grid-weather {
		grid-area: weather;
	}

	.now-grid-github {
		grid-area: github;
	}

	.now-grid-watching {
		grid-area: watching;
	}

	.now-grid-event {
		grid-area: event;
	}
}

/* _includes/css/post-page.css */
.post-page h1 {
	font-size: 3.75rem;
	line-height: 1;
	color: var(--text-base-content);
}

/*
 * Search filter animation for the post list (<TransitionGroup name="list">).
 * https://vuejs.org/guide/built-ins/transition-group.html
 *
 * - Entering (matched) rows fade + rise in, lightly staggered via the per-item
 *   `--i` index set in the template.
 * - Leaving (filtered-out) rows fade in place (no horizontal drift) and are
 *   taken out of flow so the remaining rows reflow immediately.
 * - `.list-move` (FLIP) glides the staying rows up/down smoothly — the core
 *   "filtered in/out" feel.
 */
.list-enter-active {
	transition:
		opacity 0.28s ease,
		transform 0.28s ease;
	/* Cap the stagger so long result sets don't lag behind. */
	transition-delay: min(calc(var(--i, 0) * 30ms), 300ms);
}

.list-leave-active {
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
	/* Out of flow so remaining rows animate up smoothly; full width so the row
	   doesn't collapse mid-fade. */
	position: absolute;
	width: 100%;
}

.list-move {
	transition: transform 0.3s ease;
}

.list-enter-from {
	opacity: 0;
	transform: translateY(8px);
}

.list-leave-to {
	opacity: 0;
	transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
	.list-enter-active,
	.list-leave-active,
	.list-move {
		transition: none;
	}
}

/* _includes/css/post-slug.css */
.post-slug > article {
	max-width: none;
}

/* Left-aligned editorial header: metadata kicker, serif headline, tags, rule. */
.post-slug > article header {
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: var(--sp-6);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--border);
	text-align: left;
}

.post-slug > article header > h1 {
	margin: var(--sp-3) 0;
}

@media (min-width: 768px) {
	.post-slug > article header > h1 {
		font-size: 3rem;
	}
}

.post-slug > article header > p {
	margin: var(--sp-2) 0 0 0;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secodary-content);
}

.post-slug > article header > p a {
	display: inline-block;
	margin: 0 var(--sp-05) 0 0;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--primary);
}

.post-slug > article header > p a:hover {
	text-decoration: underline;
}

.post-slug > hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: var(--sp-3) auto;
	max-width: 40rem;
}

/* _includes/css/post-year-index.css */
.post-year-index {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-top-width: 1px;
	border-color: #e5e7eb;
}

@media (min-width: 768px) {
	.post-year-index {
		margin-top: var(--sp-8);
		margin-left: var(--sp-3);
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-top-width: 0;
	}
}

.post-year-index > div:first-child {
	padding-top: var(--sp-3);
	padding-bottom: var(--sp-4);
	margin-left: var(--sp-1);
}

@media (min-width: 768px) {
	.post-year-index > div:first-child {
		margin-top: var(--sp-3);
	}
}

.post-year-index h1 {
	text-transform: capitalize;
}

.post-year-index > div:last-child {
	display: flex;
	flex-wrap: wrap;
	max-width: 32rem;
}

.post-year-index > div:last-child > div {
	margin-top: var(--sp-1);
	margin-bottom: var(--sp-1);
	margin-right: var(--sp-3);
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

.post-year-index > div:last-child > div:hover {
	text-decoration: underline;
}

.post-year-index > div:last-child > div > a:first-child {
	margin-right: var(--sp-2);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	text-transform: uppercase;
}

.post-year-index > div:last-child > div > a:last-child {
	margin-left: calc(var(--sp-1) * -1);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--text);
	text-transform: uppercase;
}

/* _includes/css/post-year.css */
.post-year h1 {
	color: var(--text-base-content);
}

.post-year p {
	margin-bottom: var(--sp-2);
	font-size: 1.25rem;
	line-height: 1.75rem;
	line-height: 1.75rem;
	color: var(--text-secondary-content);
}

/* _includes/css/tag-page.css */
.tag-page p {
	margin-bottom: var(--sp-2);
	font-size: 1.25rem;
	line-height: 1.75rem;
	line-height: 1.75rem;
	color: var(--text-secondary-content);
}

.tag-page h1 {
	text-transform: capitalize;
	color: var(--text-base-content);
}

/* _includes/css/tags-page.css */
.tags-page {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-top-width: 1px;
	border-color: var(--border);
}

@media (min-width: 768px) {
	.tags-page {
		margin-top: var(--sp-8);
		margin-left: var(--sp-3);
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-top-width: 0;
		gap: var(--sp-3);
	}
}

.tags-page > hgroup {
	padding-top: var(--sp-3);
	padding-bottom: var(--sp-4);
	margin-left: var(--sp-1);
}

@media (min-width: 768px) {
	.tags-page > hgroup {
		margin-top: var(--sp-3);
	}
}

.tags-page h1 {
	text-transform: capitalize;
}

.tags-page > ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 32rem;
	padding: 0;
}

.tags-page > ul > li {
	list-style: none;
	margin-top: var(--sp-1);
	margin-bottom: var(--sp-1);
	margin-right: var(--sp-3);
}

.tags-page > ul > li > a {
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	line-height: 1.25rem;
}

.tags-page > ul > li > a:first-child {
	margin-right: var(--sp-2);
	font-weight: 500;
	color: var(--primary);
	/* Animated underline reveal that grows from left on hover/focus. */
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition:
		background-size 200ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tags-page > ul > li > a:first-child:hover,
.tags-page > ul > li > a:first-child:focus-visible {
	background-size: 100% 1px;
	transform: translateY(-2px);
}

.tags-page > ul > li > a:last-child {
	margin-left: calc(var(--sp-1) * -1);
	font-weight: 600;
	color: var(--text-secodary-content);
}

@media (prefers-reduced-motion: reduce) {
	.tags-page > ul > li > a:first-child {
		transition: none;
	}

	.tags-page > ul > li > a:first-child:hover,
	.tags-page > ul > li > a:first-child:focus-visible {
		transform: none;
		text-decoration: underline;
	}
}

/* _includes/css/xmas-page.css */
.xmas-page iframe {
	width: 100%;
	height: 450px;
	border: 1px solid var(--border);
}