/* ==========================================================================
   Photo of the day 2026 — Coastal Monograph
   Cool paper · ink · lavender accent · Syne + Figtree
   ========================================================================== */

@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Syne:wght@600;700;800&display=swap");

@layer reset, tokens, base, layout, components, pages, utilities;

/* -------------------------------------------------------------------------- */
/* Reset                                                                      */
/* -------------------------------------------------------------------------- */

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

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

	body,
	h1, h2, h3, h4, h5, h6,
	p, blockquote, pre,
	dl, dd, ol, ul,
	figure, hr,
	fieldset, legend {
		margin: 0;
		padding: 0;
	}

	ul, ol {
		list-style: none;
	}

	*,
	*::before,
	*::after {
		border-radius: 0 !important;
	}

	img, picture, video, canvas, svg {
		display: block;
		max-inline-size: 100%;
		height: auto;
	}

	input, button, textarea, select {
		font: inherit;
		color: inherit;
	}

	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		appearance: none;
		cursor: pointer;
	}

	textarea {
		resize: vertical;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

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

	@media (max-width: 480px) {
		html, body {
			min-inline-size: 320px;
		}
	}
}

/* -------------------------------------------------------------------------- */
/* Tokens                                                                     */
/* -------------------------------------------------------------------------- */

@layer tokens {
	:root {
		--color-ink: #0e1014;
		--color-ink-soft: #1a1d24;
		--color-paper: #f4f5f7;
		--color-white: #fff;
		--color-muted: #667085;
		--color-accent: #9b87c7;
		--color-accent-soft: #f4f0fa;
		--color-line: color-mix(in srgb, #0e1014 10%, transparent);
		--color-overlay: color-mix(in srgb, #0e1014 35%, transparent);
		--color-preload: #0e1014;

		/* Aliases used across components */
		--color-text: var(--color-ink);
		--color-text-muted: var(--color-muted);
		--color-heading: var(--color-ink);
		--color-bg: var(--color-white);
		--color-bg-soft: var(--color-paper);
		--color-bg-dark: var(--color-ink);
		--color-bg-darker: var(--color-ink-soft);
		--color-bg-darkest: #08090c;
		--color-border: var(--color-line);
		--color-black: var(--color-ink);

		--font-display: "Syne", sans-serif;
		--font-body: "Figtree", sans-serif;
		--font-ui: "Syne", sans-serif;
		--font-mono: "Courier New", monospace;

		--fs-base: 1.0625rem;
		--lh-body: 1.65;
		--ls-tight: -0.02em;
		--ls-label: 0.04em;

		--header-height: 3.75rem;
		--header-height-sm: 3.25rem;
		--inner-max: 90rem;
		--inner-width: min(90%, 90rem);

		--space-xs: 0.5rem;
		--space-sm: 1rem;
		--space-md: 2rem;
		--space-lg: 4rem;
		--space-xl: 6rem;

		--radius: 0;
		--shadow-header: 0 1px 0 var(--color-line), 0 8px 24px color-mix(in srgb, #0e1014 6%, transparent);
		--ease: cubic-bezier(0.22, 1, 0.36, 1);
		--transition: 0.35s var(--ease);
		--transition-fast: 0.2s var(--ease);
		--transition-mid: 0.35s var(--ease);
		--transition-slow: 1.2s var(--ease);

		--z-header: 10000;
		--z-nav: 10002;
		--z-lightbox: 100000;
		--z-banner-logo: 100;

		--bp-sm: 480px;
		--bp-md: 736px;
		--bp-lg: 900px;
		--bp-xl: 1280px;
		--sidebar-width: 280px;
	}

	@media (min-width: 1280px) {
		:root {
			--sidebar-width: 320px;
			--fs-base: 1.125rem;
		}
	}

	@media (max-width: 736px) {
		:root {
			--header-height: var(--header-height-sm);
			--fs-base: 1rem;
		}
	}
}

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

@layer base {
	body {
		background: var(--color-paper);
		color: var(--color-text);
		font-family: var(--font-body);
		font-size: var(--fs-base);
		font-weight: 400;
		line-height: var(--lh-body);
		padding-block-start: var(--header-height);
		-webkit-font-smoothing: antialiased;
	}

	body.is-preload *,
	body.is-preload *::before,
	body.is-preload *::after {
		animation: none !important;
		transition: none !important;
	}

	body, input, select, textarea {
		font-family: var(--font-body);
		font-size: var(--fs-base);
		font-weight: 400;
		line-height: var(--lh-body);
		color: var(--color-text);
	}

	a {
		transition: color var(--transition), border-color var(--transition), opacity var(--transition);
		color: var(--color-text);
	}

	a.line {
		border-bottom: 1px dotted color-mix(in srgb, var(--color-ink) 40%, transparent);
	}

	a:hover {
		color: var(--color-accent);
	}

	strong, b {
		font-weight: 600;
		color: var(--color-ink);
	}

	em, i {
		font-style: italic;
	}

	p {
		margin-block: 0 1.5em;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-display);
		font-weight: 700;
		line-height: 1.15;
		letter-spacing: var(--ls-tight);
		margin-block: 0 1.25em;
		padding-block-end: 0;
		position: relative;
		color: var(--color-heading);
		text-transform: none;
	}

	.features h1::after,
	.features h2::after,
	.features h3::after,
	.features h4::after,
	.features h5::after,
	.home h1::after,
	.home h2::after,
	.home h3::after,
	.home h4::after,
	.home h5::after,
	.section-head h2::after,
	.section-head h3::after {
		content: "";
		position: absolute;
		inset-block-end: -0.65rem;
		inset-inline-start: 0;
		inline-size: 2.25rem;
		block-size: 2px;
		background: var(--color-accent);
		display: block;
	}

	/* View All の › は見出し下線疑似要素と衝突しないよう打ち消し */
	.home .loopost .textright h2::after,
	.home .nvall h2::after,
	.home .nvall h2 a::after {
		content: none;
		position: static;
		inset: auto;
		inline-size: auto;
		block-size: auto;
		background: none;
		display: inline;
	}

	.home .nvall h2 a::after,
	.home .loopost .textright h2::after {
		content: "\203A";
	}

	#three h1::after,
	#three h2::after,
	#three h3::after,
	#three h4::after,
	#three h5::after,
	#three h6::after,
	#three .section-head h2::after,
	#three .section-head h3::after {
		background: color-mix(in srgb, #fff 70%, transparent);
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		border-bottom: 0;
		color: inherit;
		text-decoration: none;
	}

	h1.alt, h2.alt, h3.alt, h4.alt, h5.alt, h6.alt {
		margin-block: 0 1em;
		padding-block-end: 0;
	}

	h1.alt::after, h2.alt::after, h3.alt::after,
	h4.alt::after, h5.alt::after, h6.alt::after {
		display: none;
	}

	h2 {
		font-size: clamp(1.35rem, 2vw, 1.75rem);
	}

	h3 {
		font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	}

	h4 {
		font-size: 1.05rem;
		line-height: 1.4;
	}

	h5 {
		font-size: 0.95rem;
		line-height: 1.45;
	}

	h6 {
		font-size: 0.8rem;
		line-height: 1.45;
		font-weight: 600;
		letter-spacing: var(--ls-label);
	}

	sub {
		font-size: 0.8em;
		position: relative;
		inset-block-start: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		inset-block-start: -0.5em;
	}

	blockquote {
		border-inline-start: solid 3px var(--color-accent);
		font-style: italic;
		margin-block: 0 2em;
		padding: 0.5em 0 0.5em 1.5em;
		color: var(--color-muted);
	}

	code {
		border: solid 1px var(--color-line);
		background: var(--color-paper);
		font-family: var(--font-mono);
		font-size: 0.9em;
		margin-inline: 0.25em;
		padding: 0.25em 0.65em;
		border-radius: var(--radius);
	}

	pre {
		font-family: var(--font-mono);
		font-size: 0.9em;
		margin-block: 0 2em;
		overflow-x: auto;
	}

	pre code {
		display: block;
		line-height: 1.75em;
		padding: 1em 1.5em;
		overflow-x: auto;
	}

	hr {
		border: 0;
		border-block-end: solid 1px var(--color-line);
		margin-block: 2em;
	}

	hr.major {
		margin-block: 3em;
	}

	ol {
		list-style: decimal;
		margin-block: 0 2em;
		padding-inline-start: 1.25em;
	}

	ol li {
		padding-inline-start: 0.25em;
	}

	ul {
		list-style: disc;
		margin-block: 0 2em;
		padding-inline-start: 1.5em;
	}

	ul li {
		padding-inline-start: 0;
	}

	dl {
		margin-block: 0 2em;
	}

	dl dt {
		display: block;
		font-weight: 600;
		margin-block: 0 0.5em;
	}

	dl dd {
		margin-inline-start: 1.5em;
		margin-block-end: 1em;
		color: var(--color-muted);
	}

	img {
		content-visibility: auto;
	}

	::selection {
		background: var(--color-accent-soft);
		color: var(--color-ink);
	}
}

/* -------------------------------------------------------------------------- */
/* Layout                                                                     */
/* -------------------------------------------------------------------------- */

@layer layout {
	.inner,
	#header > .inner,
	.wrapper > .inner,
	#footer > .inner {
		margin-inline: auto;
		max-inline-size: var(--inner-max);
		inline-size: var(--inner-width);
	}

	.wrapper {
		padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
		position: relative;
		background: var(--color-white);
	}

	.wrapper + .wrapper {
		border-block-start: solid 1px var(--color-line);
	}

	.wrapper.major-pad {
		padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
	}

	.wrapper.content-pad {
		padding: 0;
		background: var(--color-paper);
	}

	.wrapper.content-pad .content {
		padding: clamp(3rem, 5vw, 4rem) 0 clamp(2rem, 3vw, 2.5rem);
	}

	.wrapper.split > .inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
	}

	.wrapper.split > .inner > * {
		position: relative;
	}

	.wrapper.split > .inner > *:not(:first-child)::before {
		content: "";
		display: block;
		inline-size: 1px;
		block-size: 100%;
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: -1.75rem;
		background-color: var(--color-line);
	}

	.wrapper.style1 {
		background-color: var(--color-ink);
		color: var(--color-white);
		border-block-start: 0;
	}

	.wrapper.style1 a,
	.wrapper.style1 strong,
	.wrapper.style1 b,
	.wrapper.style1 h1,
	.wrapper.style1 h2,
	.wrapper.style1 h3,
	.wrapper.style1 h4,
	.wrapper.style1 h5,
	.wrapper.style1 h6,
	.wrapper.style1 label,
	.wrapper.style1 input,
	.wrapper.style1 select,
	.wrapper.style1 textarea {
		color: var(--color-white);
	}

	.wrapper.style1 blockquote {
		border-inline-start-color: color-mix(in srgb, #fff 30%, transparent);
	}

	.wrapper.style1 code {
		background: color-mix(in srgb, #fff 8%, transparent);
		border-color: color-mix(in srgb, #fff 25%, transparent);
	}

	.wrapper.style1 hr {
		border-block-end-color: color-mix(in srgb, #fff 20%, transparent);
	}

	.wrapper.style1 input[type="submit"],
	.wrapper.style1 input[type="reset"],
	.wrapper.style1 input[type="button"],
	.wrapper.style1 button,
	.wrapper.style1 .button {
		background-color: transparent;
		color: var(--color-white) !important;
		box-shadow: inset 0 0 0 1px var(--color-white);
	}

	.wrapper.style1 input[type="submit"]:hover,
	.wrapper.style1 input[type="reset"]:hover,
	.wrapper.style1 input[type="button"]:hover,
	.wrapper.style1 button:hover,
	.wrapper.style1 .button:hover {
		background-color: color-mix(in srgb, #fff 10%, transparent);
	}

	.wrapper.style1 input[type="submit"].primary,
	.wrapper.style1 input[type="reset"].primary,
	.wrapper.style1 input[type="button"].primary,
	.wrapper.style1 button.primary,
	.wrapper.style1 .button.primary {
		box-shadow: none;
		background-color: var(--color-white);
		color: var(--color-ink) !important;
	}

	.wrapper.style1 .features > section::before {
		background-color: color-mix(in srgb, #fff 25%, transparent);
	}

	.wrapper.style1 input[type="text"],
	.wrapper.style1 input[type="password"],
	.wrapper.style1 input[type="email"],
	.wrapper.style1 input[type="tel"],
	.wrapper.style1 input[type="search"],
	.wrapper.style1 input[type="url"],
	.wrapper.style1 input[type="date"],
	.wrapper.style1 select,
	.wrapper.style1 textarea {
		border-color: color-mix(in srgb, #fff 25%, transparent);
		background: color-mix(in srgb, #fff 6%, transparent);
	}

	.wrapper.style1 input[type="text"]:focus,
	.wrapper.style1 input[type="password"]:focus,
	.wrapper.style1 input[type="email"]:focus,
	.wrapper.style1 input[type="tel"]:focus,
	.wrapper.style1 input[type="search"]:focus,
	.wrapper.style1 input[type="url"]:focus,
	.wrapper.style1 input[type="date"]:focus,
	.wrapper.style1 select:focus,
	.wrapper.style1 textarea:focus {
		border-color: var(--color-accent);
	}

	.wrapper.style1 ul.alt li {
		border-block-start-color: color-mix(in srgb, #fff 18%, transparent);
	}

	.wrapper.style1 ul.menu li {
		border-inline-start-color: color-mix(in srgb, #fff 25%, transparent);
	}

	.wrapper.style1 + .wrapper {
		border-block-start: 0;
	}

	.wrapper.style1.split > .inner > *:not(:first-child)::before {
		background-color: color-mix(in srgb, #fff 25%, transparent);
	}

	.wrapper.style2 {
		background-color: var(--color-paper);
		color: var(--color-text);
		border-block-start: 0;
	}

	.wrapper.style2 a,
	.wrapper.style2 strong,
	.wrapper.style2 b,
	.wrapper.style2 h1,
	.wrapper.style2 h2,
	.wrapper.style2 h3,
	.wrapper.style2 h4,
	.wrapper.style2 h5,
	.wrapper.style2 h6,
	.wrapper.style2 label,
	.wrapper.style2 input,
	.wrapper.style2 select,
	.wrapper.style2 textarea {
		color: var(--color-text);
	}

	#three.wrapper.style2 {
		position: relative;
		background-color: var(--color-ink-soft);
		background-image: none;
		color: var(--color-white);
		isolation: isolate;
		overflow: hidden;
	}

	#three.wrapper.style2::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background-image: var(--album-bg, none);
		background-repeat: no-repeat;
		background-position: top right;
		background-size: cover;
		opacity: 0.38;
		-webkit-mask-image: linear-gradient(
			to bottom left,
			#000 0%,
			#000 18%,
			rgba(0, 0, 0, 0.55) 42%,
			rgba(0, 0, 0, 0.15) 68%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom left,
			#000 0%,
			#000 18%,
			rgba(0, 0, 0, 0.55) 42%,
			rgba(0, 0, 0, 0.15) 68%,
			transparent 100%
		);
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	#three.wrapper.style2 > .inner {
		position: relative;
		z-index: 1;
	}

	#three.wrapper.style2 a,
	#three.wrapper.style2 strong,
	#three.wrapper.style2 b,
	#three.wrapper.style2 h1,
	#three.wrapper.style2 h2,
	#three.wrapper.style2 h3,
	#three.wrapper.style2 h4,
	#three.wrapper.style2 h5,
	#three.wrapper.style2 h6 {
		color: var(--color-white);
	}

	.wrapper.style2 .post .content {
		background-color: var(--color-white);
		border: 0;
	}

	.wrapper.style2 + .wrapper {
		border-block-start: 0;
	}

	/* Sidebar: modern CSS grid */
	.wrapper.sidebar > .inner {
		display: grid;
		grid-template-columns: 1fr var(--sidebar-width);
		gap: 3rem;
		align-items: start;
	}

	.wrapper.sidebar > .inner > header {
		grid-column: 1 / -1;
	}

	.wrapper.sidebar > .inner > .content {
		min-inline-size: 0;
		padding-inline-end: 0;
	}

	.wrapper.sidebar > .inner > .sidebar {
		min-inline-size: 0;
	}

	.wrapper.sidebar.left > .inner {
		grid-template-columns: var(--sidebar-width) 1fr;
	}

	.wrapper.sidebar.left > .inner > .content {
		order: 2;
	}

	.wrapper.sidebar.left > .inner > .sidebar {
		order: 1;
	}

	.wrapper.sidebar.right > .inner > .content {
		padding-inline-end: 0;
	}

	/* Features: three columns with vertical dividers */
	.features {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(2.5rem, 5vw, 4rem);
		position: relative;
	}

	.features > section {
		position: relative;
		padding-block-start: 0;
		border-block-start: 0;
		inline-size: auto;
	}

	.features > section:not(:first-child)::before {
		content: "";
		display: block;
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: calc(clamp(2.5rem, 5vw, 4rem) / -2);
		inline-size: 1px;
		block-size: 100%;
		background-color: var(--color-line);
	}

	.features h3 {
		margin-block-end: 1.25em;
		padding-block-end: 0.85em;
	}

	.features h3::after {
		content: "";
		display: block;
		clear: both;
	}

	.features h3 .vall {
		float: inline-end;
		font-size: 0.75em;
		font-weight: 600;
		font-family: var(--font-body);
		letter-spacing: 0;
	}

	.features h3 .vall::after {
		content: "\203A";
		margin-inline-start: 0.35em;
		color: var(--color-accent);
	}

	.features h3 .vall a:hover {
		color: var(--color-accent);
		border-bottom: 1px solid var(--color-accent);
		padding-block-end: 0.15em;
	}

	.features p {
		margin-block-end: 1.25em;
		color: var(--color-muted);
		font-size: 0.95em;
	}

	.home .features .tagtop a {
		padding: 0;
	}

	.features .tagtop a {
		display: block;
		font-size: 0.95em !important;
		line-height: 1.9;
		block-size: auto;
	}

	/* Posts grid */
	.posts {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		margin-block-end: 2em;
		justify-content: start;
	}

	.posts.alt {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 1.25rem;
	}

	.posts img {
		max-inline-size: 100%;
		block-size: auto;
		vertical-align: top;
	}

	#main {
		padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
		background: var(--color-white);
	}

	#main.subpage {
		padding: clamp(2rem, 4vw, 3rem) 0;
	}

	#main > .inner > header.major:first-child {
		margin-block-end: 3em;
	}

	#main.subpage > .inner > header.major:first-child {
		margin-block-end: 1.5em;
	}

	header.major {
		margin-block: 0 2.5em;
	}

	header.major > :last-child {
		margin-block-end: 0;
	}

	.section-head {
		margin-block-end: 2rem;
	}

	.section-head h2,
	.section-head h3 {
		margin-block-end: 0.85em;
		padding-block-end: 0.85em;
		display: inline-block;
	}

	.section-lede {
		color: var(--color-muted);
		font-size: 0.95em;
		margin-block: 0.75em 0;
		max-inline-size: 36em;
	}

	#three .section-lede {
		color: color-mix(in srgb, #fff 70%, transparent);
	}

	section.special,
	article.special {
		text-align: center;
	}

	#footer {
		padding: 2.5rem 0;
		border-block-start: solid 1px var(--color-line);
		position: relative;
		background: var(--color-paper);
	}

	#footer > .inner {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	#footer .copyright {
		color: var(--color-muted);
		font-size: 0.85em;
		margin: 0;
	}

	#footer .menu {
		color: var(--color-muted);
		font-size: 0.85em;
		position: static;
		margin: 0;
	}

	#footer .menu a {
		color: inherit;
	}

	#footer .menu a:hover {
		color: var(--color-accent);
		border-bottom: 1px solid var(--color-accent);
		padding-block-end: 0.1em;
	}

	/* Responsive layout */
	@media (max-width: 1680px) {
		.posts {
			gap: 1rem;
			grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		}

		.posts.alt {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		}
	}

	@media (max-width: 1280px) {
		#header > .inner,
		.wrapper > .inner {
			inline-size: 100%;
			padding-inline: 2.5rem;
			max-inline-size: none;
		}

		#footer > .inner {
			inline-size: 100%;
			padding-inline: 2.5rem;
		}

		.wrapper.split > .inner {
			gap: 2.5rem;
		}

		.wrapper.split > .inner > *:not(:first-child)::before {
			inset-inline-start: -1.25rem;
		}
	}

	@media (max-width: 1070px) {
		.posts,
		.posts.alt {
			gap: 0.75rem;
		}
	}

	@media (max-width: 1024px) {
		.posts {
			grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		}

		.posts.alt {
			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		}
	}

	@media (max-width: 900px) {
		.wrapper.sidebar > .inner {
			grid-template-columns: 1fr;
			gap: 2.5rem;
		}

		.wrapper.sidebar > .inner > .sidebar {
			border-block-start: solid 1px var(--color-line);
			padding-block-start: 2.5rem;
		}

		.wrapper.sidebar.left > .inner > .content,
		.wrapper.sidebar.left > .inner > .sidebar {
			order: unset;
		}

		.wrapper.split > .inner {
			grid-template-columns: 1fr;
		}

		.wrapper.split > .inner > * {
			padding-block-start: 0;
		}

		.wrapper.split > .inner > *:not(:first-child)::before {
			position: relative;
			inset-inline-start: 0;
			inset-block-start: 0;
			block-size: 1px;
			inline-size: 100%;
			margin-block-end: 2rem;
		}

		.features {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		.features > section:not(:first-child)::before {
			inset-block-start: -1rem;
			inset-inline-start: 0;
			inline-size: 100%;
			block-size: 1px;
		}

		#footer > .inner {
			flex-direction: column;
			text-align: center;
		}
	}

	@media (max-width: 736px) {
		#header > .inner,
		.wrapper > .inner,
		#footer > .inner {
			padding-inline: 1.25rem;
		}

		.wrapper {
			padding: 2.5rem 0 1.5rem;
		}

		.wrapper.major-pad {
			padding: 2.5rem 0 1.5rem;
		}

		.wrapper.content-pad .content {
			padding: 2.5rem 0 1.5rem;
		}

		#main {
			padding: 2.5rem 0 1.5rem;
		}

		#main > .inner > header.major:first-child {
			margin-block-end: 2rem;
		}
	}

	@media (max-width: 480px) {
		#footer .menu li a span {
			display: none;
		}
	}
}

/* -------------------------------------------------------------------------- */
/* Components                                                                 */
/* -------------------------------------------------------------------------- */

@layer components {
	/* Buttons */
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		appearance: none;
		transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
		border: 0;
		border-radius: var(--radius);
		cursor: pointer;
		display: inline-block;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 0.85em;
		letter-spacing: var(--ls-label);
		block-size: 2.75em;
		line-height: 2.75em;
		padding-inline: 1.35em;
		text-align: center;
		text-decoration: none;
		text-transform: none;
		white-space: nowrap;
		background-color: transparent;
		color: var(--color-ink) !important;
		box-shadow: inset 0 0 0 1px var(--color-ink);
	}

	input[type="submit"].icon,
	input[type="reset"].icon,
	input[type="button"].icon,
	button.icon,
	.button.icon {
		padding-inline-start: 1.2em;
	}

	input[type="submit"].icon::before,
	input[type="reset"].icon::before,
	input[type="button"].icon::before,
	button.icon::before,
	.button.icon::before {
		margin-inline-end: 0.5em;
	}

	input[type="submit"].fit,
	input[type="reset"].fit,
	input[type="button"].fit,
	button.fit,
	.button.fit {
		display: block;
		inline-size: 100%;
	}

	input[type="submit"].small,
	input[type="reset"].small,
	input[type="button"].small,
	button.small,
	.button.small {
		font-size: 0.75em;
		block-size: 2.4em;
		line-height: 2.4em;
	}

	input[type="submit"].large,
	input[type="reset"].large,
	input[type="button"].large,
	button.large,
	.button.large {
		font-size: 1.05em;
	}

	input[type="submit"].disabled,
	input[type="submit"]:disabled,
	input[type="reset"].disabled,
	input[type="reset"]:disabled,
	input[type="button"].disabled,
	input[type="button"]:disabled,
	button.disabled,
	button:disabled,
	.button.disabled,
	.button:disabled {
		pointer-events: none;
		opacity: 0.3;
	}

	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover,
	button:hover,
	.button:hover {
		background-color: var(--color-paper);
	}

	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active,
	button:active,
	.button:active {
		background-color: var(--color-accent-soft);
	}

	input[type="submit"].primary,
	input[type="reset"].primary,
	input[type="button"].primary,
	button.primary,
	.button.primary,
	input[type="submit"].special,
	input[type="reset"].special,
	input[type="button"].special,
	button.special,
	.button.special {
		box-shadow: none;
		background-color: var(--color-ink);
		color: var(--color-white) !important;
	}

	input[type="submit"].primary:hover,
	input[type="reset"].primary:hover,
	input[type="button"].primary:hover,
	button.primary:hover,
	.button.primary:hover,
	input[type="submit"].special:hover,
	input[type="reset"].special:hover,
	input[type="button"].special:hover,
	button.special:hover,
	.button.special:hover {
		background-color: var(--color-ink-soft);
	}

	input[type="submit"].primary:active,
	input[type="reset"].primary:active,
	input[type="button"].primary:active,
	button.primary:active,
	.button.primary:active {
		background-color: var(--color-bg-darkest);
	}

	input[type="submit"].alt,
	input[type="reset"].alt,
	input[type="button"].alt,
	button.alt,
	.button.alt {
		background-color: transparent;
		color: var(--color-ink) !important;
		box-shadow: inset 0 0 0 1px var(--color-line);
	}

	input[type="submit"].alt:hover,
	input[type="reset"].alt:hover,
	input[type="button"].alt:hover,
	button.alt:hover,
	.button.alt:hover {
		background-color: var(--color-accent-soft);
		box-shadow: inset 0 0 0 1px var(--color-accent);
		color: var(--color-ink) !important;
	}

	/* Forms */
	form {
		margin-block: 0 2em;
	}

	label {
		display: block;
		margin-block: 0 0.5em;
		text-transform: none;
		letter-spacing: var(--ls-label);
		font-size: 0.85em;
		font-family: var(--font-display);
		font-weight: 700;
		color: var(--color-ink);
	}

	input[type="text"],
	input[type="date"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		appearance: none;
		border: solid 1px color-mix(in srgb, var(--color-ink) 22%, transparent);
		border-radius: var(--radius);
		background: var(--color-white);
		color: inherit;
		display: block;
		outline: 0;
		padding-inline: 1em;
		text-decoration: none;
		inline-size: 100%;
		transition: border-color var(--transition), box-shadow var(--transition);
	}

	input[type="text"]:invalid,
	input[type="date"]:invalid,
	input[type="password"]:invalid,
	input[type="email"]:invalid,
	input[type="tel"]:invalid,
	input[type="search"]:invalid,
	input[type="url"]:invalid,
	select:invalid,
	textarea:invalid {
		box-shadow: none;
	}

	input[type="text"],
	input[type="date"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select {
		block-size: 2.75em;
	}

	textarea {
		padding: 0.75em 1em;
		min-block-size: 8em;
	}

	select {
		background-size: 1.1rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		padding-inline-end: 2.75em;
		text-overflow: ellipsis;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%230e1014' /%3E%3C/svg%3E");
	}

	select option {
		color: var(--color-ink);
		background: var(--color-white);
	}

	input[type="text"]:focus,
	input[type="date"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	input[type="tel"]:focus,
	input[type="search"]:focus,
	input[type="url"]:focus,
	select:focus,
	textarea:focus {
		border-color: var(--color-accent);
		box-shadow: 0 0 0 3px var(--color-accent-soft);
	}

	input[type="checkbox"],
	input[type="radio"] {
		appearance: none;
		display: block;
		float: inline-start;
		margin-inline-end: -2em;
		opacity: 0;
		inline-size: 1em;
		z-index: -1;
	}

	input[type="checkbox"] + label,
	input[type="radio"] + label {
		text-decoration: none;
		cursor: pointer;
		display: inline-block;
		padding-inline: 2.4em 0.75em;
		position: relative;
		font-size: 1em;
		font-family: var(--font-body);
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		color: var(--color-text);
	}

	input[type="checkbox"] + label::before,
	input[type="radio"] + label::before {
		display: inline-block;
		border: solid 1px color-mix(in srgb, var(--color-ink) 25%, transparent);
		content: "";
		block-size: 2.0625em;
		inline-size: 2.0625em;
		inset-inline-start: 0;
		position: absolute;
		text-align: center;
		inset-block-start: 0;
		background-color: var(--color-paper);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 55%;
		transition: border-color var(--transition), background-color var(--transition);
		border-radius: var(--radius);
	}

	input[type="checkbox"]:checked + label::before {
		content: "";
		background-color: var(--color-ink);
		border-color: var(--color-ink);
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='square' stroke-linejoin='miter' d='M3 8.2l3.2 3.2L13 4.5'/%3E%3C/svg%3E");
	}

	input[type="radio"]:checked + label::before {
		content: "";
		background-color: var(--color-ink);
		border-color: var(--color-ink);
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23fff'/%3E%3C/svg%3E");
	}

	input[type="checkbox"]:focus + label::before,
	input[type="radio"]:focus + label::before {
		border-color: var(--color-accent);
	}

	input[type="radio"] + label::before {
		border-radius: 0;
	}

	::placeholder {
		opacity: 1;
		color: var(--color-muted);
	}

	/* Icons */
	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

	.icon::before {
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		text-transform: none !important;
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		cursor: inherit;
	}

	.icon > .label {
		display: none;
	}

	.icon.solid::before {
		font-weight: 900;
	}

	.icon.brands::before {
		font-family: "Font Awesome 5 Brands";
	}

	.icon.fa-camera::before {
		content: "\f030";
	}

	.icon.fa-envelope::before {
		content: "\f0e0";
	}

	.icon.fa-angle-left::before {
		content: "\f104";
	}

	.sr-only {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.icon-wrapper {
		inline-size: 4em;
		block-size: 2em;
		line-height: 2em;
		display: inline-block;
		text-align: center;
		position: relative;
		margin-block: 1.235em;
		background-color: var(--color-paper);
		box-shadow: 0 -1px 0 0 var(--color-paper), 0 1px 0 0 var(--color-paper);
	}

	.icon-wrapper::before,
	.icon-wrapper::after {
		content: "";
		inline-size: 0;
		block-size: 0;
		border-inline: solid 2em transparent;
		position: absolute;
		inset-inline-start: 0;
	}

	.icon-wrapper::before {
		border-block-end: solid 1.235em var(--color-paper);
		inset-block-start: -1.235em;
	}

	.icon-wrapper::after {
		border-block-start: solid 1.235em var(--color-paper);
		inset-block-end: -1.235em;
	}

	.icon-wrapper .icon {
		cursor: default;
	}

	.icon-wrapper .icon::before {
		font-size: 1.5rem;
	}

	.icon-wrapper.major {
		display: block;
		margin: 1.235em 0 3.235em;
	}

	.icon-wrapper.small {
		font-size: 0.75em;
	}

	.icon-wrapper.small .icon::before {
		font-size: 1.25rem;
	}

	/* Images */
	.image {
		border: 0;
		display: inline-block;
		position: relative;
	}

	.image img {
		display: block;
	}

	.image.left,
	.image.right {
		max-inline-size: 40%;
	}

	.image.left img,
	.image.right img {
		inline-size: 100%;
	}

	.image.left {
		float: inline-start;
		margin: 0 1.5em 1em 0;
		inset-block-start: 0.25em;
	}

	.image.right {
		float: inline-end;
		margin: 0 0 1em 1.5em;
		inset-block-start: 0.25em;
	}

	.image.fit {
		display: block;
		margin-block: 0 2em;
		inline-size: 100%;
	}

	.image.fit img {
		inline-size: 100%;
	}

	.image.main {
		display: block;
		margin-block: 0 3em;
		inline-size: 100%;
	}

	.image.main img {
		inline-size: 100%;
	}

	/* Lists */
	ul.alt {
		list-style: none;
		padding-inline-start: 0;
		margin: 0;
	}

	ul.alt li {
		border-block-start: solid 1px var(--color-line);
		padding-block: 0.65em;
	}

	ul.alt li:first-child {
		border-block-start: 0;
		padding-block-start: 0;
	}

	ul.actions {
		display: flex;
		cursor: default;
		list-style: none;
		margin-inline-start: -1em;
		padding-inline-start: 0;
	}

	ul.actions li {
		padding-inline: 1em 0 0;
		vertical-align: middle;
	}

	ul.actions.special {
		justify-content: center;
		inline-size: 100%;
		margin-inline-start: 0;
	}

	ul.actions.special li:first-child {
		padding-inline-start: 0;
	}

	ul.actions.stacked {
		flex-direction: column;
		margin-inline-start: 0;
	}

	ul.actions.stacked li {
		padding: 1.3em 0 0;
	}

	ul.actions.stacked li:first-child {
		padding-block-start: 0;
	}

	ul.actions.fit {
		inline-size: calc(100% + 1em);
	}

	ul.actions.fit li {
		flex: 1 1 auto;
		inline-size: 100%;
	}

	ul.actions.fit li > * {
		inline-size: 100%;
	}

	ul.actions.fit.stacked {
		inline-size: 100%;
	}

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

	ul.menu li {
		padding: 0;
		display: inline-block;
		margin-inline-start: 0.75em;
		padding-inline-start: 0.75em;
		border-inline-start: solid 1px var(--color-line);
		line-height: 1em;
	}

	ul.menu li:first-child {
		margin-inline-start: 0;
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	ul.icons {
		list-style: none;
		padding-inline-start: 0;
	}

	ul.icons li {
		display: inline-block;
		padding: 0 1em 0 0;
	}

	ul.icons li:last-child {
		padding-inline-end: 0;
	}

	ul.icons li .icon::before {
		font-size: 2em;
	}

	ul.bulleted-icons {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}

	ul.bulleted-icons li {
		margin-block-start: 2em;
		overflow: hidden;
		padding-inline-start: 4.5em;
		position: relative;
		inline-size: 50%;
	}

	ul.bulleted-icons li .icon-wrapper {
		font-size: 0.65em;
		inset-inline-start: 0;
		position: absolute;
		inset-block-start: 0;
	}

	ul.bulleted-icons li h3 {
		font-size: 0.9em;
		margin-block-end: 0.5em;
		padding-block-end: 0;
	}

	ul.bulleted-icons li h3::after {
		display: none;
	}

	ul.pagination {
		cursor: default;
		list-style: none;
		padding-inline-start: 0;
	}

	ul.pagination li {
		display: inline-block;
		padding-inline-start: 0;
		vertical-align: middle;
	}

	ul.pagination li > .page {
		transition: background-color var(--transition), color var(--transition);
		border-bottom: 0;
		display: inline-block;
		block-size: 1.75em;
		line-height: 1.75em;
		margin-inline: 0.125em;
		min-inline-size: 1.75em;
		padding-inline: 0.5em;
		text-align: center;
		border-radius: var(--radius);
	}

	ul.pagination li:first-child {
		padding-inline-end: 0.75em;
	}

	ul.pagination li:last-child {
		padding-inline-start: 0.75em;
	}

	ul.pagination li > .page.active {
		background-color: var(--color-ink);
		color: var(--color-white) !important;
	}

	ul.pagination li > .page.active:hover {
		background-color: var(--color-ink-soft);
	}

	/* Post */
	.post {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.post .image {
		display: block;
		margin-block-end: 1em;
		inline-size: 100%;
		flex: 0 0 auto;
		position: relative;
		overflow: hidden;
	}

	.post .image img {
		inline-size: 100%;
		transition: transform var(--transition), filter var(--transition);
	}

	.post .content {
		padding: 2rem 2rem 0.75rem;
		flex-grow: 1;
		background-color: transparent;
		border: solid 1px var(--color-line);
		border-radius: var(--radius);
	}

	.post .image img.imgdk {
		transition: filter var(--transition), transform var(--transition);
	}

	.post .image .date {
		display: none;
		transition: opacity var(--transition);
		opacity: 0;
	}

	.post .image:hover img,
	.post .image:hover img.imgdk,
	.post .image img.imgdk:hover {
		transform: scale(1.02);
		filter: brightness(0.88);
	}

	.post .image:hover .date {
		display: block;
		opacity: 1;
	}

	.postloop .image.fit {
		margin-block-end: 0;
	}

	@media (max-width: 1280px) {
		.post .content {
			padding: 1.5rem 1.5rem 0.5rem;
		}

		ul.bulleted-icons li {
			inline-size: 100%;
			margin-block-start: 1em;
		}
	}

	@media (max-width: 736px) {
		.post .content {
			padding: 1.25rem 1.25rem 0.5rem;
		}
	}

	@media (max-width: 480px) {
		ul.actions:not(.fixed) {
			flex-direction: column;
			margin-inline-start: 0;
			inline-size: 100% !important;
		}

		ul.actions:not(.fixed) li {
			flex: 1 1 auto;
			padding: 1em 0 0;
			text-align: center;
			inline-size: 100%;
		}

		ul.actions:not(.fixed) li > * {
			inline-size: 100%;
		}

		ul.actions:not(.fixed) li:first-child {
			padding-block-start: 0;
		}

		ul.actions:not(.fixed) li input[type="submit"],
		ul.actions:not(.fixed) li input[type="reset"],
		ul.actions:not(.fixed) li input[type="button"],
		ul.actions:not(.fixed) li button,
		ul.actions:not(.fixed) li .button {
			inline-size: 100%;
		}

		ul.pagination li:nth-child(n+2):nth-last-child(n+2) {
			display: none;
		}

		ul.pagination li:first-child {
			padding-inline-end: 0;
		}
	}

	/* Box */
	.box {
		border: solid 1px var(--color-line);
		margin-block-end: 2em;
		padding: 1.5em;
		border-radius: var(--radius);
		background: var(--color-paper);
	}

	.box > :last-child,
	.box > :last-child > :last-child,
	.box > :last-child > :last-child > :last-child {
		margin-block-end: 0;
	}

	.box.alt {
		border: 0;
		border-radius: 0;
		padding: 0;
		background: transparent;
	}

	/* Dropotron */
	.dropotron {
		list-style: none;
		padding: 0.5em;
		background: color-mix(in srgb, white 92%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		color: var(--color-ink);
		min-inline-size: 12em;
		margin-block-start: -0.5em;
		font-family: var(--font-display);
		font-weight: 600;
		font-size: 0.9em;
		box-shadow: var(--shadow-header);
		border-radius: var(--radius);
		border: 1px solid var(--color-line);
	}

	.dropotron li {
		box-shadow: inset 0 1px 0 0 var(--color-line);
	}

	.dropotron li:first-child {
		box-shadow: none;
	}

	.dropotron a {
		color: inherit;
		text-decoration: none;
		letter-spacing: 0;
		font-size: 0.9em;
		display: block;
		line-height: 2.75em;
		border: 0;
		padding-inline: 0.75em;
		border-radius: var(--radius);
	}

	.dropotron a:hover {
		background: var(--color-accent-soft);
		color: var(--color-ink);
	}

	.dropotron.level-0 {
		margin-block-start: 0;
	}

	.dropotron.level-0::before {
		content: "";
		border-inline: solid 0.5em transparent;
		border-block-end: solid 0.5em var(--color-white);
		display: block;
		position: absolute;
		inset-block-start: -0.45em;
		inset-inline-start: 50%;
		margin-inline-start: -0.25em;
	}

	/* Lightbox */
	dialog.lightbox:not([open]),
	.lightbox:not([open]):not(.is-open) {
		display: none !important;
	}

	.lightbox.is-open,
	dialog.lightbox[open] {
		position: fixed;
		inset: 0;
		z-index: var(--z-lightbox);
		inline-size: 100%;
		block-size: 100%;
		max-inline-size: none;
		max-block-size: none;
		margin: 0;
		padding: clamp(1rem, 4vw, 2.5rem);
		border: none;
		background: color-mix(in srgb, #0e1014 92%, transparent);
		display: grid;
		place-items: center;
		outline: none;
		color: var(--color-white);
	}

	dialog.lightbox::backdrop {
		background: color-mix(in srgb, #0e1014 88%, transparent);
	}

	.lightbox img,
	dialog.lightbox img {
		max-inline-size: min(92vw, 1400px);
		max-block-size: 88vh;
		inline-size: auto;
		block-size: auto;
		object-fit: contain;
		margin-inline: auto;
	}

	.lightbox__close,
	.lightbox-close {
		position: absolute;
		inset-block-start: 1rem;
		inset-inline-end: 1rem;
		appearance: none;
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		padding: 0;
		margin: 0;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		outline: none;
		color: var(--color-white) !important;
		font-family: var(--font-body);
		font-size: 1.5rem;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1;
		text-transform: none;
		cursor: pointer;
		z-index: 2;
	}

	.lightbox__close:hover,
	.lightbox-close:hover,
	.lightbox__close:active,
	.lightbox-close:active {
		background: transparent !important;
		box-shadow: none !important;
		opacity: 0.7;
	}

	.lightbox__close:focus-visible,
	.lightbox-close:focus-visible {
		outline: 1px solid var(--color-white);
		outline-offset: 2px;
	}

	#lightbox:not([open]):not(.is-open) {
		display: none !important;
	}

	#lightbox[open],
	#lightbox.is-open {
		position: fixed;
		inset: 0;
		z-index: var(--z-lightbox);
		background: color-mix(in srgb, #0e1014 92%, transparent);
		display: grid;
		place-items: center;
	}

	#lightbox img {
		max-inline-size: 90vw;
		max-block-size: 90vh;
	}
}

/* -------------------------------------------------------------------------- */
/* Pages                                                                      */
/* -------------------------------------------------------------------------- */

@layer pages {
	@keyframes reveal-header {
		0% {
			transform: translateY(-100%);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	@keyframes fade-up {
		from {
			opacity: 0;
			transform: translateY(1rem);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	[data-reveal] {
		opacity: 0;
		transform: translateY(1.25rem);
		transition:
			opacity 0.7s var(--ease),
			transform 0.7s var(--ease);
	}

	[data-reveal].is-revealed {
		opacity: 1;
		transform: translateY(0);
	}

	@media (prefers-reduced-motion: reduce) {
		[data-reveal] {
			opacity: 1;
			transform: none;
			transition: none;
		}
	}

	/* Header */
	#header {
		background: color-mix(in srgb, white 85%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: var(--shadow-header);
		font-family: var(--font-display);
		font-weight: 600;
		block-size: var(--header-height);
		inset-inline-start: 0;
		line-height: normal;
		position: fixed;
		text-transform: none;
		inset-block-start: 0;
		inline-size: 100%;
		z-index: var(--z-header);
		color: var(--color-ink);
	}

	#header > .inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		block-size: 100%;
		gap: 1.5rem;
	}

	#header h1 {
		block-size: auto;
		inset-inline-start: 0;
		line-height: 1.2;
		margin: 0;
		padding-block-end: 0;
		position: relative;
		float: none;
		text-transform: none;
		font-weight: 700;
		font-size: 0.95em;
		letter-spacing: var(--ls-tight);
	}

	#header h1::after {
		display: none;
	}

	#header h1 a {
		color: inherit;
		font-size: inherit;
	}

	#header h1 a span,
	#contact h3 span {
		text-transform: none;
		font-weight: 400;
		font-size: 0.8em;
		padding-inline-start: 0.5em;
		font-family: var(--font-body);
		letter-spacing: 0;
		opacity: 0.7;
	}

	#header.alt h1 {
		visibility: hidden;
		pointer-events: none;
	}

	#header.reveal h1,
	#header:not(.alt) h1 {
		visibility: visible;
		pointer-events: auto;
	}

	#header nav {
		block-size: auto;
		line-height: normal;
		position: relative;
		inset-inline-end: 0;
		inset-block-start: 0;
		float: none;
		display: flex;
		align-items: center;
	}

	#header nav > ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		gap: 0;
	}

	#header nav > ul > li {
		display: block;
		margin-inline-start: 1.75em;
		padding: 0;
		line-height: normal;
	}

	#header nav > ul > li > ul {
		display: none;
	}

	#header nav > ul > li a {
		text-decoration: none;
		border-bottom: 0;
		font-size: 0.85em;
		font-weight: 600;
		letter-spacing: 0.01em;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		transition: color var(--transition), border-color var(--transition), background-color var(--transition);
	}

	#header nav > ul > li a::before {
		display: none;
	}

	#header nav > ul > li:first-child {
		margin-inline-start: 0;
	}

	#header nav > ul > li a.nav-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: var(--radius);
		line-height: 1;
		inline-size: 2rem;
		block-size: 2rem;
		min-inline-size: 2rem;
		min-block-size: 2rem;
		max-inline-size: 2rem;
		max-block-size: 2rem;
		box-sizing: border-box;
		background: transparent;
	}

	#header nav > ul > li a.nav-cta .icon {
		display: grid;
		place-items: center;
		line-height: 1;
		font-size: 0.95rem;
	}

	#header nav > ul > li a.nav-cta .icon::before {
		line-height: 1;
	}

	#header nav > ul > li a.nav-cta:hover,
	#header nav > ul > li a.nav-cta:focus-visible {
		background: transparent;
		border: 0;
		color: var(--color-accent) !important;
		padding: 0;
		inline-size: 2rem;
		block-size: 2rem;
		min-inline-size: 2rem;
		min-block-size: 2rem;
		max-inline-size: 2rem;
		max-block-size: 2rem;
	}

	#header .navPanelToggle {
		--nav-toggle-inset: 0.5rem;
		appearance: none;
		text-decoration: none;
		border: 0 !important;
		box-shadow: none !important;
		outline: none;
		padding: 0;
		margin: 0;
		inline-size: calc(var(--header-height) - (var(--nav-toggle-inset) * 2));
		block-size: calc(var(--header-height) - (var(--nav-toggle-inset) * 2));
		position: absolute;
		inset-inline-end: var(--nav-toggle-inset);
		inset-block-start: var(--nav-toggle-inset);
		transform: none;
		display: none;
		place-items: center;
		background: color-mix(in srgb, var(--color-ink) 7%, transparent) !important;
		color: inherit;
		font-size: inherit;
		letter-spacing: 0;
		line-height: 1;
		cursor: pointer;
		transition: background var(--transition), opacity var(--transition);
	}

	#header .navPanelToggle::before {
		display: block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		text-transform: none !important;
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f0c9";
		font-size: 1.15rem;
		position: static;
		inline-size: auto;
		block-size: auto;
		text-align: center;
	}

	#header .navPanelToggle:hover,
	#header .navPanelToggle:active {
		background: color-mix(in srgb, var(--color-ink) 12%, transparent) !important;
		box-shadow: none !important;
		opacity: 1;
	}

	#header .navPanelToggle:focus-visible {
		outline: 1px solid currentColor;
		outline-offset: 2px;
	}

	#header + #banner {
		margin-block-start: calc(var(--header-height) * -1);
	}

	#header.reveal {
		animation: reveal-header 0.45s var(--ease);
		background: color-mix(in srgb, white 85%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: var(--shadow-header);
		color: var(--color-ink);
		position: fixed;
		inset-block-start: 0;
	}

	#header.alt {
		color: var(--color-white);
		animation: none;
		background-color: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
		position: absolute;
		inset-block-start: 0;
	}

	#header.alt input[type="submit"],
	#header.alt input[type="reset"],
	#header.alt input[type="button"],
	#header.alt button:not(.navPanelToggle),
	#header.alt .button {
		background-color: transparent;
		color: var(--color-white) !important;
		box-shadow: inset 0 0 0 1px var(--color-white);
	}

	#header.alt input[type="submit"]:hover,
	#header.alt input[type="reset"]:hover,
	#header.alt input[type="button"]:hover,
	#header.alt button:not(.navPanelToggle):hover,
	#header.alt .button:hover {
		background-color: color-mix(in srgb, #fff 12%, transparent);
	}

	#header.alt input[type="submit"].primary,
	#header.alt input[type="reset"].primary,
	#header.alt input[type="button"].primary,
	#header.alt button.primary,
	#header.alt .button.primary {
		box-shadow: none;
		background-color: var(--color-white);
		color: var(--color-ink) !important;
	}

	#header.alt input,
	#header.alt select,
	#header.alt textarea {
		color: var(--color-white);
	}

	#header.alt ul li a {
		color: var(--color-white);
	}

	#header.alt ul li a:hover {
		color: var(--color-accent-soft);
		border-bottom: 1px solid color-mix(in srgb, #fff 70%, transparent);
		padding-block-end: 0.15em;
	}

	#header.reveal ul li a,
	#header:not(.alt) ul li a {
		color: var(--color-ink);
	}

	#header ul li a:hover,
	#header.reveal ul li a:hover {
		color: var(--color-accent);
		border-bottom: 1px solid var(--color-accent);
		padding-block-end: 0.15em;
	}

	#header.alt.reveal {
		background: color-mix(in srgb, white 85%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: var(--shadow-header);
		color: var(--color-ink);
	}

	#header.alt.reveal ul li a {
		color: var(--color-ink);
	}

	#header.alt.reveal ul li a:hover {
		color: var(--color-accent);
		border-bottom: 1px solid var(--color-accent);
	}

	#header.alt.reveal .navPanelToggle {
		color: var(--color-ink);
		background: color-mix(in srgb, var(--color-ink) 7%, transparent) !important;
	}

	#header.alt.reveal .navPanelToggle:hover,
	#header.alt.reveal .navPanelToggle:active {
		background: color-mix(in srgb, var(--color-ink) 12%, transparent) !important;
	}

	#header.alt:not(.reveal) .navPanelToggle,
	#header.alt:not(.reveal) .navPanelToggle::before {
		color: var(--color-white) !important;
	}

	#header.alt strong,
	#header.alt b,
	#header.alt h1,
	#header.alt h2,
	#header.alt h3,
	#header.alt h4,
	#header.alt h5,
	#header.alt h6 {
		color: var(--color-white);
	}

	#header.alt.reveal h1 {
		color: var(--color-ink);
	}

	@media (max-width: 1280px) {
		#header.alt nav {
			inset-inline-end: 0;
		}
	}

	@media (max-width: 980px) {
		#header nav {
			display: none;
		}

		#header .navPanelToggle {
			display: grid;
			color: var(--color-ink);
		}

		#header.alt .navPanelToggle {
			color: var(--color-white) !important;
			background: color-mix(in srgb, #fff 16%, transparent) !important;
		}

		#header.alt .navPanelToggle::before {
			color: var(--color-white) !important;
		}

		#header.alt .navPanelToggle:hover,
		#header.alt .navPanelToggle:active {
			background: color-mix(in srgb, #fff 26%, transparent) !important;
		}

		#header.alt.reveal .navPanelToggle {
			color: var(--color-ink) !important;
			background: color-mix(in srgb, var(--color-ink) 7%, transparent) !important;
		}

		#header.alt.reveal .navPanelToggle::before {
			color: var(--color-ink) !important;
		}

		#header.alt.reveal .navPanelToggle:hover,
		#header.alt.reveal .navPanelToggle:active {
			background: color-mix(in srgb, var(--color-ink) 12%, transparent) !important;
		}
	}

	@media (max-width: 736px) {
		#header {
			block-size: var(--header-height-sm);
			line-height: normal;
		}

		#header h1 {
			inset-inline-start: 0 !important;
			inset-block-start: 0;
		}

		#header h1 a {
			font-size: 0.85em;
		}
	}

	/* Banner — full-bleed hero */
	#banner {
		background-color: var(--color-ink);
		color: var(--color-white);
		min-block-size: 32rem;
		block-size: 100svh;
		position: relative;
		overflow: hidden;
	}

	#banner input,
	#banner select,
	#banner textarea,
	#banner a,
	#banner strong,
	#banner b,
	#banner h1,
	#banner h2,
	#banner h3,
	#banner h4,
	#banner h5,
	#banner h6 {
		color: var(--color-white);
	}

	#banner::after {
		pointer-events: none;
		transition: opacity 1.2s var(--ease), visibility 1.2s;
		background: var(--color-preload);
		content: "";
		display: block;
		block-size: 100%;
		inset-inline-start: 0;
		opacity: 0;
		position: absolute;
		inset-block-start: 0;
		visibility: hidden;
		inline-size: 100%;
		z-index: 2;
	}

	body.is-preload #banner::after {
		opacity: 1;
		visibility: visible;
	}

	#banner .indicators {
		inset-block-end: 1.75em;
		inset-inline-start: 0;
		list-style: none;
		margin: 0;
		padding: 0;
		position: absolute;
		text-align: center;
		inline-size: 100%;
		z-index: 3;
	}

	#banner .indicators li {
		cursor: pointer;
		display: inline-block;
		block-size: 2em;
		overflow: hidden;
		padding: 0;
		position: relative;
		text-indent: -6em;
		inline-size: 2em;
	}

	#banner .indicators li::before {
		background: color-mix(in srgb, #fff 40%, transparent);
		border-radius: 0;
		content: "";
		display: inline-block;
		block-size: 0.55em;
		inset-inline-start: 50%;
		margin: -0.275em 0 0 -0.275em;
		position: absolute;
		text-indent: 0;
		inset-block-start: 50%;
		inline-size: 0.55em;
		transition: background var(--transition), transform var(--transition);
	}

	#banner .indicators li.visible::before {
		background: var(--color-white);
		transform: scale(1.2);
	}

	#banner > article {
		transition: opacity 1.2s var(--ease), visibility 1.2s;
		background-attachment: scroll;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		block-size: 100%;
		inset-inline-start: 0;
		opacity: 0;
		position: absolute;
		text-align: center;
		inset-block-start: 0;
		visibility: hidden;
		inline-size: 100%;
		z-index: 0;
	}

	#banner > article::before {
		content: "";
		display: inline-block;
		block-size: 100%;
		vertical-align: middle;
	}

	#banner > article::after {
		content: "";
		display: block;
		inline-size: 100%;
		block-size: 100%;
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			color-mix(in srgb, #0e1014 18%, transparent) 0%,
			color-mix(in srgb, #0e1014 38%, transparent) 100%
		);
		opacity: 1;
		pointer-events: none;
	}

	#banner > article .inner {
		display: inline-block;
		vertical-align: middle;
		z-index: 1;
		max-inline-size: var(--inner-max);
		inline-size: var(--inner-width);
	}

	#banner > article .inner > :last-child {
		margin-block-end: 0;
	}

	#banner > article h2 {
		font-weight: 600;
		font-size: 0.95em;
		padding-block-end: 0;
		margin: 0 0 0.5em;
		position: absolute;
		inset-block-end: 2.5em;
		inset-inline-end: 2em;
		text-transform: none;
		letter-spacing: 0;
		color: var(--color-white);
		z-index: 100;
		opacity: 0.85;
	}

	#banner > article h2::after {
		display: none;
	}

	#banner > article img {
		display: none;
	}

	#banner > article.visible {
		opacity: 1;
		visibility: visible;
	}

	#banner > article.top {
		z-index: 1;
	}

	#banner > article.instant {
		transition: none !important;
	}

	#banner > .logo {
		position: absolute;
		z-index: var(--z-banner-logo);
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%);
		max-inline-size: 36rem;
		inline-size: min(88%, 36rem);
		text-align: center;
	}

	#banner > .logo img,
	.logo img {
		display: inline-block;
		margin-inline: auto;
		inline-size: 100%;
		filter: drop-shadow(0 2px 16px color-mix(in srgb, #0e1014 35%, transparent));
	}

	.logo p {
		text-align: center;
		margin-block-start: 1.25em;
		margin-block-end: 0;
		font-size: clamp(0.95rem, 1.4vw, 1.1rem);
		line-height: 1.55;
		font-weight: 400;
		color: color-mix(in srgb, #fff 88%, transparent);
		max-inline-size: 28em;
		margin-inline: auto;
		text-shadow: 0 1px 12px color-mix(in srgb, #0e1014 40%, transparent);
	}

	/* Site update — under logo tagline */
	#banner > .logo .site-update {
		position: relative;
		inset: auto;
		transform: none;
		z-index: auto;
		display: flex;
		justify-content: center;
		margin: 1.1em 0 0;
		padding: 0;
		max-inline-size: none;
		background: transparent;
		line-height: 1.3;
		pointer-events: none;
		text-align: center;
		text-shadow: 0 1px 10px color-mix(in srgb, #0e1014 45%, transparent);
	}

	#banner > .logo .site-update .lmod {
		display: inline-flex;
		align-items: baseline;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.4em 0.65em;
		padding: 0.4rem 0 0.5rem;
		border-block-end: 1px solid color-mix(in srgb, #fff 28%, transparent);
		font-size: 0.75em;
		font-family: var(--font-body);
		letter-spacing: 0.02em;
		color: color-mix(in srgb, #fff 78%, transparent);
	}

	#banner > .logo .site-update .lmod-label {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 0.85em;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: color-mix(in srgb, var(--color-accent) 70%, #fff);
	}

	#banner > .logo .site-update .lmod-time {
		font-weight: 500;
		letter-spacing: 0.02em;
		color: color-mix(in srgb, #fff 92%, transparent);
	}

	#banner > .logo .site-update .lmod-sep {
		margin-inline: 0.1em;
		opacity: 0.45;
	}

	.lmod {
		font-size: 0.8em;
		font-family: var(--font-body);
		letter-spacing: 0.02em;
		color: inherit;
	}

	@media (max-width: 1280px) {
		#banner {
			min-block-size: 30rem;
		}

		#banner > .logo {
			max-inline-size: 28rem;
		}
	}

	@media (max-width: 980px) {
		#banner {
			min-block-size: 28rem;
			block-size: 100svh;
		}

		#banner > article {
			background-attachment: scroll;
		}
	}

	@media (max-width: 736px) {
		#banner {
			min-block-size: 26rem;
			block-size: 100svh;
		}

		#banner > article .inner {
			inline-size: 90%;
		}

		#banner > article h2 {
			font-size: 0.8em;
			inset-inline-end: 1.25em;
		}

		#banner > .logo {
			max-inline-size: 80%;
			inline-size: 80%;
		}

		.logo p {
			font-size: 0.9rem;
		}

		#banner > .logo .site-update {
			margin-block-start: 0.95em;
		}

		#banner > .logo .site-update .lmod {
			font-size: 0.7em;
		}
	}

	body.is-mobile #banner > article {
		background-attachment: scroll;
	}

	/* Nav panel */
	#navPanel {
		transform: translateX(100%);
		transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), visibility 0.4s;
		background-color: var(--color-white);
		box-shadow: none;
		display: none;
		block-size: 100%;
		max-inline-size: 85%;
		overflow-y: auto;
		position: fixed;
		inset-inline-end: 0;
		inset-block-start: 0;
		visibility: hidden;
		inline-size: 18rem;
		z-index: var(--z-nav);
		font-family: var(--font-display);
		font-weight: 600;
		text-transform: none;
		border-inline-start: 1px solid var(--color-line);
	}

	#navPanel nav {
		padding: 4rem 1.75rem 2rem;
	}

	#navPanel .link {
		border: 0;
		border-block-start: solid 1px var(--color-line);
		color: var(--color-ink) !important;
		display: block;
		font-size: 0.95em;
		padding-block: 0.9em;
		transition: color var(--transition), padding-inline-start var(--transition);
	}

	#navPanel .link:first-child {
		border-block-start: 0;
	}

	#navPanel .link:hover {
		color: var(--color-accent) !important;
		padding-inline-start: 0.35em;
	}

	#navPanel .link.depth-0 {
		font-weight: 700;
	}

	#navPanel .link .indent-1 { display: inline-block; inline-size: 1.25em; }
	#navPanel .link .indent-2 { display: inline-block; inline-size: 2.5em; }
	#navPanel .link .indent-3 { display: inline-block; inline-size: 3.75em; }
	#navPanel .link .indent-4 { display: inline-block; inline-size: 5em; }
	#navPanel .link .indent-5 { display: inline-block; inline-size: 6.25em; }

	#navPanel .close {
		text-decoration: none;
		transition: opacity var(--transition);
		border: 0;
		color: var(--color-ink);
		cursor: pointer;
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		padding: 0;
		margin: 0.5rem;
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: 0;
		background: transparent;
		box-shadow: none;
		outline: none;
	}

	#navPanel .close::before {
		display: block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		text-transform: none !important;
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f00d";
		font-size: 1.1rem;
		position: static;
		inline-size: auto;
		block-size: auto;
		text-align: center;
	}

	#navPanel .close:hover {
		color: var(--color-ink);
		opacity: 0.55;
	}

	#navPanel .close:focus-visible {
		outline: 1px solid var(--color-ink);
		outline-offset: 2px;
	}

	#navPanel.visible {
		transform: translateX(0);
		box-shadow: -8px 0 32px color-mix(in srgb, #0e1014 12%, transparent);
		visibility: visible;
	}

	@media (max-width: 980px) {
		#navPanel {
			display: block;
		}
	}

	@media (max-width: 736px) {
		#navPanel nav {
			padding: 3.5rem 1.25rem 1.5rem;
		}
	}

	/* Contact — dark ink */
	#contact {
		background: var(--color-ink);
		color: color-mix(in srgb, #fff 88%, transparent);
		border-block-start: 0;
	}

	#contact .inner {
		max-inline-size: 48rem;
	}

	#contact .button {
		background-color: var(--color-white);
		box-shadow: none;
		color: var(--color-ink) !important;
	}

	#contact .button:hover {
		background-color: var(--color-accent-soft);
	}

	#contact a {
		color: var(--color-white);
		border-bottom: 1px solid var(--color-accent);
		padding-block-end: 0.1em;
		text-underline-offset: 0.2em;
	}

	#contact a:hover {
		color: var(--color-accent-soft);
		border-bottom-color: var(--color-accent-soft);
	}

	#contact h3 {
		color: var(--color-white);
		font-size: clamp(1.2rem, 2vw, 1.5rem);
		padding-block-end: 0;
		margin-block-end: 1em;
	}

	#contact h3::after {
		display: none;
	}

	#contact p {
		color: color-mix(in srgb, #fff 72%, transparent);
	}

	.coffeelink {
		margin-block-end: 2em;
	}

	form#mailformpro label.lowc {
		text-transform: none;
		font-size: 1em;
		letter-spacing: 0;
		font-family: var(--font-body);
		font-weight: 500;
	}

	.mfp_element_reset,
	button#mfp_button_cancel {
		box-shadow: none;
	}

	/* Mailform buttons */
	div.mfp_buttons {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1.25rem 1.75rem;
		clear: both;
		margin-block-start: 2rem;
		padding: 1.5rem 0 0;
		border-block-start: 1px solid var(--color-line);
		text-align: start;
	}

	div.mfp_buttons button,
	div.mfp_buttons .btn,
	div.mfp_buttons .btn.btn-success,
	div.mfp_buttons button#mfp_button_send,
	div.mfp_buttons button#mfp_button_cancel {
		appearance: none;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.45em;
		margin: 0;
		border: 0;
		border-radius: 0;
		font-family: var(--font-display);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;
		line-height: 1.2;
		transition:
			color 0.45s var(--ease),
			background-color 0.45s var(--ease),
			opacity 0.45s var(--ease),
			transform 0.45s var(--ease),
			box-shadow 0.45s var(--ease);
	}

	div.mfp_buttons button[type="submit"],
	div.mfp_buttons .btn.btn-success:not(.reset),
	div.mfp_buttons .mfp-btn-send,
	div.mfp_buttons button#mfp_button_send {
		padding: 0.95em 1.8em;
		background: var(--color-ink) !important;
		color: #fff !important;
		-webkit-text-fill-color: #fff !important;
		box-shadow: none !important;
		font-size: 0.78em;
		font-weight: 700;
	}

	div.mfp_buttons button[type="submit"]:hover,
	div.mfp_buttons .btn.btn-success:not(.reset):hover,
	div.mfp_buttons .mfp-btn-send:hover,
	div.mfp_buttons button#mfp_button_send:hover,
	div.mfp_buttons button[type="submit"]:focus-visible,
	div.mfp_buttons .mfp-btn-send:focus-visible,
	div.mfp_buttons button#mfp_button_send:focus-visible {
		background: var(--color-accent) !important;
		color: #fff !important;
		-webkit-text-fill-color: #fff !important;
		opacity: 1;
		transform: translateY(-0.1em);
	}

	div.mfp_buttons button[type="reset"],
	div.mfp_buttons .btn.btn-success.reset,
	div.mfp_buttons .mfp-btn-reset,
	div.mfp_buttons button#mfp_button_cancel {
		display: inline-flex;
		padding: 0.35em 0;
		margin-inline-start: auto;
		background: transparent !important;
		color: var(--color-muted) !important;
		-webkit-text-fill-color: var(--color-muted) !important;
		box-shadow: none !important;
		font-size: 0.72em;
		font-weight: 600;
		opacity: 0.75;
		position: relative;
	}

	div.mfp_buttons button[type="reset"]::after,
	div.mfp_buttons .btn.btn-success.reset::after,
	div.mfp_buttons .mfp-btn-reset::after,
	div.mfp_buttons button#mfp_button_cancel::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-end: 0;
		inline-size: 100%;
		block-size: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.45s var(--ease), background-color 0.45s var(--ease);
		opacity: 0.45;
	}

	div.mfp_buttons button[type="reset"]:hover,
	div.mfp_buttons .btn.btn-success.reset:hover,
	div.mfp_buttons .mfp-btn-reset:hover,
	div.mfp_buttons button#mfp_button_cancel:hover,
	div.mfp_buttons button[type="reset"]:focus-visible,
	div.mfp_buttons .mfp-btn-reset:focus-visible,
	div.mfp_buttons button#mfp_button_cancel:focus-visible {
		color: var(--color-ink) !important;
		background: transparent !important;
		opacity: 1;
		transform: none;
	}

	div.mfp_buttons button[type="reset"]:hover::after,
	div.mfp_buttons .btn.btn-success.reset:hover::after,
	div.mfp_buttons .mfp-btn-reset:hover::after,
	div.mfp_buttons button#mfp_button_cancel:hover::after {
		transform: scaleX(1);
		background: var(--color-accent);
		opacity: 1;
	}

	@media (max-width: 480px) {
		div.mfp_buttons {
			flex-direction: row;
			justify-content: space-between;
			gap: 1rem;
		}

		div.mfp_buttons button[type="submit"],
		div.mfp_buttons .mfp-btn-send,
		div.mfp_buttons button#mfp_button_send {
			inline-size: auto;
		}

		div.mfp_buttons button[type="reset"],
		div.mfp_buttons .mfp-btn-reset,
		div.mfp_buttons button#mfp_button_cancel {
			align-self: center;
			margin-inline-start: auto;
		}
	}

	/* Site-specific: loopost / nvall / album / journal */
	.loopost {
		position: relative;
	}

	.nvall h2 a::after,
	.loopost .textright h2::after {
		content: "\203A";
		margin-inline-start: 0.3em;
		color: var(--color-accent);
		position: static;
		display: inline;
		inset: auto;
		inline-size: auto;
		block-size: auto;
		background: none;
		vertical-align: baseline;
		line-height: inherit;
	}

	.alubumlist .loopost .textright h2::after {
		color: var(--color-accent-soft);
	}

	.nvall h2::after,
	.loopost .textright h2::after,
	#three .loopost .textright h2::after,
	.home .loopost .textright h2::after,
	.home .nvall h2::after,
	.home .nvall h2 a::after {
		background: none;
		inset: auto;
		inline-size: auto;
		block-size: auto;
	}

	.loopost .textright h2 {
		margin-block-end: 0;
		padding-inline: 0.75rem;
		position: absolute;
		inset-block-end: 0.4rem;
		inset-inline-start: 0.5rem;
		color: var(--color-ink);
		z-index: 2;
		font-weight: 600;
		font-size: 0.7em;
		text-transform: none;
		letter-spacing: 0;
		line-height: 1.2;
		white-space: nowrap;
	}

	.wrapper.style2 .alubumlist h2 {
		color: var(--color-white);
	}

	.alubumlist h6 {
		font-size: 0.95em;
		line-height: 1.2;
		padding-block-end: 0;
		margin-block-end: 0.35em;
	}

	.nvall h2 {
		inset-block-end: 0;
		inset-inline-start: auto;
		font-size: 0.75em;
		inset-inline-end: 0;
		block-size: auto;
		line-height: 1;
		font-weight: 600;
		margin-block: 1.25em 0 0;
	}

	.nvall h2 a {
		transition: background var(--transition), border-color var(--transition), color var(--transition);
		display: inline-block;
		padding: 0.55em 1em;
		border: 1px solid var(--color-ink);
		border-radius: var(--radius);
	}

	.nvall h2 a:hover {
		background: var(--color-accent-soft);
		border-color: var(--color-accent);
		color: var(--color-ink);
	}

	.snaplist .loopost .textright h2 {
		inset-block-end: 0.5rem;
		inset-inline-start: auto;
		inset-inline-end: 0.5em;
		padding: 0 0 0 0.75rem;
	}

	.alubumlist .loopost .textright h2 {
		font-size: 0.7rem;
	}

	.loopost .date {
		font-size: 0.7rem;
		position: absolute;
		inset-block-end: 0.5em;
		inset-inline-start: 0.75em;
		color: var(--color-white);
		text-shadow: 0 1px 8px color-mix(in srgb, #0e1014 55%, transparent);
		font-family: var(--font-body);
	}

	.post .image.loopost {
		margin-block-end: 0;
	}

	.post .image.loopost.last {
		border: 1px dashed color-mix(in srgb, var(--color-ink) 35%, transparent);
		transition: background var(--transition), border-color var(--transition);
		border-radius: var(--radius);
	}

	.alubumlist .post .image.loopost.last {
		border: 1px dashed color-mix(in srgb, #fff 45%, transparent);
	}

	.post .image.loopost.last:hover {
		background: var(--color-accent-soft);
		opacity: 1;
	}

	.alubumlist .post .image.loopost.last:hover {
		background: color-mix(in srgb, #fff 12%, transparent);
	}

	.alubumlist .post .image .date {
		display: block;
		opacity: 0.88;
		pointer-events: none;
		color: var(--color-white) !important;
		transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
		transform: translateY(0.15em);
	}

	.alubumlist .post .image:hover .date {
		opacity: 1;
		transform: translateY(0);
	}

	.alubumlist .post .image .date h6 {
		color: var(--color-white) !important;
		margin: 0;
		padding: 0;
		font-size: inherit;
		font-weight: 600;
		letter-spacing: inherit;
		line-height: 1.3;
	}

	.alubumlist .post .image .date h6::after {
		display: none;
		content: none;
	}

	.alubumlist .post .image img.imgdk {
		filter: brightness(0.82);
		transform: scale(1);
		transition:
			filter 0.55s var(--ease),
			transform 0.55s var(--ease);
	}

	.alubumlist .post .image:hover img.imgdk,
	.alubumlist .post .image img.imgdk:hover {
		filter: brightness(1);
		transform: scale(1.03);
	}

	.alubumlist .post h2 {
		font-size: 1em;
		margin: 0;
		padding: 0 0 0.5em;
	}

	.alubumlist p {
		color: color-mix(in srgb, #fff 80%, transparent);
	}

	#main.wrapper.subpage .alubumlist h6,
	#three.wrapper.style2 .alubumlist h6 {
		color: var(--color-white);
	}

	#main.wrapper.subpage .alubumlist {
		color: var(--color-ink);
	}

	#main.wrapper.subpage .alubumlist h6 {
		color: var(--color-ink);
	}

	#three.wrapper.style2 .ttls.textright h2 {
		color: var(--color-white);
	}

	/* Journal list — clean, purple accent bar on hover */
	.journallist ul.alt li {
		padding: 0.5em 0;
		background: #fff;
		border-block-start: 0;
		border-inline-start: 0;
		transition: 0.5s;
		margin-block-end: 0;
	}

	.journallist ul.alt li:first-child {
		padding-block-start: 0.5em;
	}

	.journallist ul.alt li:hover {
		background-color: rgba(255, 255, 255, 0.5);
		transition: background-color 0.3s cubic-bezier(0.4, 1.07, 1, 1);
		padding-inline: 0.8rem;
		border-inline-start-color: transparent;
	}

	.journallist ul::after {
		content: "";
		display: block;
		clear: both;
	}

	.journallist .diarytitle {
		vertical-align: middle;
		line-height: 1.45;
		font-weight: 500;
	}

	.journallist .datetime {
		margin-block-start: 0.35em;
		float: inline-end;
		font-size: 0.75em;
		color: var(--color-muted);
	}

	.journallist .icon.fa-camera {
		color: var(--color-accent);
		font-size: 0.8em;
		vertical-align: middle;
	}

	.journallist.diarylist ul.alt {
		gap: 1.25rem;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		margin-block-end: 2em;
		display: grid;
		justify-content: start;
	}

	.journallist.diarylist ul.alt li {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: relative;
		padding: 0;
		border: 0;
		overflow: hidden;
		border-radius: var(--radius);
		aspect-ratio: 640 / 288;
		min-block-size: 0;
	}

	.journallist.diarylist ul.alt li:hover {
		padding: 0;
		background: transparent;
		border-inline-start-color: transparent;
	}

	.journallist.diarylist .dsphoto {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		z-index: 1;
		transition: filter var(--transition), transform var(--transition);
		filter: brightness(0.62);
	}

	.journallist.diarylist .dsphoto:hover,
	.journallist.diarylist li:hover .dsphoto {
		filter: brightness(0.78);
		transform: scale(1.03);
	}

	.journallist.diarylist .dlista {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		inline-size: 100%;
		block-size: 100%;
		text-align: center;
		padding: 1.5em;
		z-index: 2;
	}

	.journallist.diarylist .diarytitle,
	.journallist.diarylist .datetime {
		position: relative;
		color: var(--color-white);
		text-shadow: 0 1px 10px color-mix(in srgb, #0e1014 50%, transparent);
		z-index: 3;
		pointer-events: none;
		float: none;
	}

	.journallist.diarylist .diarytitle {
		font-size: 0.95em;
		line-height: 1.25;
		display: block;
		font-family: var(--font-display);
		font-weight: 600;
	}

	.journallist.diarylist .datetime {
		font-size: 0.7em;
		line-height: 1.2;
		margin-inline-start: 0;
		margin-block-start: 0.5em;
	}

	.journallist.diarylist .newicon {
		position: absolute;
		inset-inline-end: 0.5em;
		inset-block-start: 0.35em;
		color: var(--color-white);
		text-shadow: 0 1px 8px color-mix(in srgb, #0e1014 50%, transparent);
		z-index: 4;
	}

	.journallist.diarylist .icon {
		position: absolute;
		inset-inline-end: 0.5em;
		inset-block-end: 0.35em;
		color: color-mix(in srgb, #fff 80%, transparent);
		z-index: 4;
	}

	@media (max-width: 1680px) {
		.journallist.diarylist ul.alt {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		}
	}

	@media (max-width: 1070px) {
		.journallist.diarylist ul.alt {
			gap: 0.75rem;
		}
	}

	/* Tags */
	.subpage .tagtop,
	.tagtop {
		margin-block-end: 2em;
	}

	.tagtop a::before {
		content: "#";
		opacity: 0.55;
	}

	#main .tagtop a {
		display: inline-block;
		font-size: 0.8em !important;
		background: var(--color-paper);
		padding-inline: 0.75em;
		line-height: 2.2em;
		block-size: 2.2em;
		margin: 0 0.35em 0.45em 0;
		border-radius: var(--radius);
		border: 1px solid var(--color-line);
		transition: color var(--transition), background var(--transition), border-color var(--transition);
		color: var(--color-muted);
	}

	.tagtop a:hover {
		opacity: 1;
		color: var(--color-accent);
		border-color: var(--color-accent);
		background: var(--color-accent-soft);
	}

	.home .tagtop a {
		background: none;
		padding: 0 0.85em 0 0;
		border: 0;
		block-size: auto;
		line-height: 1.8;
		margin: 0;
		color: var(--color-muted);
	}

	.home .tagtop a:hover {
		color: var(--color-accent);
		background: none;
	}

	.home .alubumlist .tagtop a {
		color: color-mix(in srgb, #fff 75%, transparent);
	}

	.home .alubumlist .tagtop a:hover {
		color: var(--color-accent-soft);
	}

	ul.tags {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		margin: 0;
		padding: 0;
	}

	.single .tags li a::before {
		content: "#";
		opacity: 0.55;
	}

	.single .tags li a {
		display: inline-block;
		font-size: 0.8em;
		border: 1px solid var(--color-line);
		padding-inline: 0.65em;
		line-height: 2em;
		block-size: 2em;
		border-radius: var(--radius);
		transition: background var(--transition), border-color var(--transition), color var(--transition);
		color: var(--color-muted);
	}

	.single .tags li a:hover {
		opacity: 1;
		background-color: var(--color-accent-soft);
		border-color: var(--color-accent);
		color: var(--color-accent);
	}

	.diarycate::before {
		content: "#";
	}

	.diarycate {
		padding: 0;
		font-size: 0.8em;
		line-height: 1.5em;
		vertical-align: middle;
		color: var(--color-accent);
	}

	.diarycate:not(:first-child) {
		padding-inline-start: 0.5em;
	}

	/* Links / images */
	a.linknimg img {
		transition: filter var(--transition), transform var(--transition);
	}

	a.linknimg:hover img {
		filter: brightness(0.88);
		transform: scale(1.02);
	}

	/* Breadcrumbs / pagination */
	.ptitle {
		margin-block-end: 1.5em;
		font-size: 0.9em;
		color: var(--color-muted);
	}

	.pagelink:nth-child(n+2)::before {
		content: "\203A";
		margin-inline: 0.55em;
		opacity: 0.5;
	}

	.pagelink a:hover {
		color: var(--color-accent);
	}

	.pagenvleft {
		inline-size: 50%;
		float: inline-start;
		text-align: start;
	}

	.pagenvright {
		inline-size: 50%;
		float: inline-end;
		text-align: end;
	}

	.pagenv {
		margin-block: 1.5em 2em;
	}

	.pagenv a,
	.pagenv .nav-links a,
	.pagenv .page-numbers {
		background: var(--color-paper);
		padding-inline: 0.65em;
		line-height: 2em;
		block-size: 2em;
		display: inline-block;
		text-decoration: none;
		color: var(--color-ink);
		border: 1px solid var(--color-line);
		border-radius: var(--radius);
		transition: background var(--transition), border-color var(--transition), color var(--transition);
		font-size: 0.9em;
	}

	.pagenv a:hover,
	.pagenv .page-numbers:hover {
		opacity: 1;
		background: var(--color-accent-soft);
		border-color: var(--color-accent);
		color: var(--color-accent);
	}

	.pagenv .current,
	.pagenv .page-numbers.current {
		padding: 0 0.65em;
		border: 1px solid var(--color-ink);
		background: var(--color-ink);
		color: var(--color-white);
		line-height: 2em;
		block-size: 2em;
		display: inline-block;
		border-radius: var(--radius);
	}

	.pagenv .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35em;
		align-items: center;
	}

	/* Single post Prev / Next */
	.pagenv.postnav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
		align-items: start;
		margin-block: 2.5rem 1.5rem;
		padding-block-start: 1.75rem;
		border-block-start: 1px solid var(--color-line);
		float: none;
	}

	.pagenv.postnav::after {
		display: none;
	}

	.pagenv.postnav .pagenvleft,
	.pagenv.postnav .pagenvright {
		float: none;
		inline-size: auto;
		min-inline-size: 0;
	}

	.pagenv.postnav .pagenvright {
		text-align: end;
		justify-self: end;
	}

	.pagenv.postnav .postnav-link {
		display: inline-flex;
		flex-direction: column;
		gap: 0.45rem;
		max-inline-size: min(100%, 22rem);
		padding: 0.15rem 0 0.35rem;
		margin: 0;
		border: 0;
		background: transparent !important;
		box-shadow: none !important;
		block-size: auto;
		line-height: 1.25;
		text-decoration: none;
		color: var(--color-ink) !important;
		position: relative;
		transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
		opacity: 0.72;
	}

	.pagenv.postnav .pagenvleft .postnav-link {
		align-items: flex-start;
		text-align: start;
	}

	.pagenv.postnav .pagenvright .postnav-link {
		align-items: flex-end;
		text-align: end;
	}

	.pagenv.postnav .postnav-dir {
		display: inline-flex;
		align-items: center;
		gap: 0.45em;
		font-family: var(--font-display);
		font-size: 0.68em;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--color-muted);
		transition: color 0.45s var(--ease), letter-spacing 0.45s var(--ease);
	}

	.pagenv.postnav .postnav-dir::before,
	.pagenv.postnav .postnav-dir::after {
		font-size: 1.05em;
		line-height: 1;
		opacity: 0.75;
		transition: transform 0.45s var(--ease), color 0.45s var(--ease);
	}

	.pagenv.postnav .pagenvleft .postnav-dir::before {
		content: "\2039";
	}

	.pagenv.postnav .pagenvright .postnav-dir::after {
		content: "\203A";
	}

	.pagenv.postnav .postnav-title {
		font-family: var(--font-display);
		font-size: clamp(0.95rem, 1.4vw, 1.15rem);
		font-weight: 700;
		letter-spacing: var(--ls-tight);
		line-height: 1.3;
		color: var(--color-ink);
		position: relative;
		display: inline;
		background-image: linear-gradient(currentColor, currentColor);
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0 1px;
		transition: background-size 0.45s var(--ease), color 0.45s var(--ease);
	}

	.pagenv.postnav .pagenvright .postnav-title {
		background-position: 100% 100%;
	}

	.pagenv.postnav .postnav-link:hover,
	.pagenv.postnav .postnav-link:focus-visible {
		opacity: 1;
		background: transparent !important;
		border-color: transparent;
		color: var(--color-ink) !important;
	}

	.pagenv.postnav .pagenvleft .postnav-link:hover,
	.pagenv.postnav .pagenvleft .postnav-link:focus-visible {
		transform: translateX(-0.2rem);
	}

	.pagenv.postnav .pagenvright .postnav-link:hover,
	.pagenv.postnav .pagenvright .postnav-link:focus-visible {
		transform: translateX(0.2rem);
	}

	.pagenv.postnav .postnav-link:hover .postnav-dir,
	.pagenv.postnav .postnav-link:focus-visible .postnav-dir {
		color: var(--color-accent);
		letter-spacing: 0.18em;
	}

	.pagenv.postnav .pagenvleft .postnav-link:hover .postnav-dir::before,
	.pagenv.postnav .pagenvleft .postnav-link:focus-visible .postnav-dir::before {
		transform: translateX(-0.2em);
		color: var(--color-accent);
	}

	.pagenv.postnav .pagenvright .postnav-link:hover .postnav-dir::after,
	.pagenv.postnav .pagenvright .postnav-link:focus-visible .postnav-dir::after {
		transform: translateX(0.2em);
		color: var(--color-accent);
	}

	.pagenv.postnav .postnav-link:hover .postnav-title,
	.pagenv.postnav .postnav-link:focus-visible .postnav-title {
		background-size: 100% 1px;
		color: var(--color-ink);
	}

	@media (max-width: 600px) {
		.pagenv.postnav {
			grid-template-columns: 1fr;
			gap: 1.25rem;
		}

		.pagenv.postnav .pagenvright {
			text-align: start;
			justify-self: start;
		}

		.pagenv.postnav .pagenvright .postnav-link {
			align-items: flex-start;
			text-align: start;
		}

		.pagenv.postnav .pagenvright .postnav-title {
			background-position: 0 100%;
		}
	}

	/* Back thumb / diary */
	.backthum {
		inline-size: 100%;
		position: fixed;
		opacity: 0.28;
		z-index: -1;
	}

	.backthum::after {
		content: "";
		position: absolute;
		inset-block-end: -1em;
		inset-inline-start: 0;
		inline-size: 100%;
		block-size: 100%;
		background-image: linear-gradient(180deg, transparent 0% 8%, var(--color-paper) 48% 100%);
	}

	.backthum img {
		inline-size: 100%;
	}

	.diary-wrapper {
		max-inline-size: 38rem;
		margin: 4rem auto;
		min-block-size: 18rem;
		padding-inline: 1rem;
	}

	.diary-wrapper h4 {
		padding-block-end: 0;
		margin-block-end: 0.5em;
		font-size: 0.95em;
	}

	.diary-image {
		margin: 0;
		text-align: center;
	}

	.single-diary .content p {
		margin-block-end: 1em;
	}

	.single-diary .textonly {
		background: color-mix(in srgb, white 78%, transparent);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		padding: 2em;
		border-radius: var(--radius);
		border: 1px solid var(--color-line);
	}

	.single-diary .textonly p {
		margin-block-end: 0;
	}

	.diary-gallery {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.diary-gallery .gallery {
		display: grid;
		gap: 0.65rem;
		grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
		margin-block-end: 2em;
		justify-content: start;
	}

	.single-diary .gallery-item img {
		max-inline-size: 100%;
		block-size: auto;
		vertical-align: top;
		border-radius: var(--radius);
	}

	.page-id-56299 .diary-wrapper {
		text-align: center;
	}

	.single .post-edit-link {
		text-decoration: none;
		color: var(--color-white);
		font-size: 0.6em;
		margin-inline-start: 0.5em;
	}

	.loopost a.post-edit-link {
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: 0;
		background: color-mix(in srgb, #fff 35%, transparent);
		block-size: 10px;
		inline-size: 10px;
		clip-path: polygon(100% 0, 1000% 100%, 0 100%);
	}

	.dlista {
		display: block;
	}

	.newicon {
		color: var(--color-accent);
		font-family: var(--font-body);
		font-size: 0.65em;
		inline-size: 40px;
		vertical-align: middle;
		font-weight: 600;
	}

	.dsnophoto {
		inline-size: 40px;
		block-size: 40px;
		vertical-align: middle;
		margin-inline-end: 0.5em;
		display: inline-block;
		border: 1px dashed var(--color-line);
		border-radius: var(--radius);
	}

	.dsphoto {
		display: inline-block;
		inline-size: 40px;
		block-size: auto;
		vertical-align: middle;
		margin-inline-end: 0.5em;
		border-radius: var(--radius);
	}

	/* Sitemap */
	ul.sitemap {
		padding-inline-start: 0;
		font-family: var(--font-body);
		font-size: 0.85rem;
		font-weight: 500;
		text-transform: none;
		list-style: none;
	}

	ul.sitemap li {
		display: inline-block;
		margin-inline-end: 0.35em;
		margin-block-end: 0.5em;
		background: var(--color-white);
		padding: 0.45em 0.85em;
		border: 1px solid var(--color-line);
		border-radius: var(--radius);
		transition: border-color var(--transition), background var(--transition);
	}

	ul.sitemap li:hover {
		border-color: var(--color-accent);
		background: var(--color-accent-soft);
	}

	ul.sitemap li a {
		text-decoration: none;
	}

	.archive ul.sitemap {
		margin-block-start: 2em;
	}

	.archive ul.sitemap li {
		border: 1px solid var(--color-line);
	}

	/* Heading lines */
	.hlinea,
	.hline {
		position: relative;
		margin-block-end: 2em;
	}

	.hlinea h3,
	.hline h3 {
		text-align: start;
		position: relative;
		padding-block-end: 0;
		margin-block-end: 0;
	}

	.hline h3::after {
		content: "";
		display: block;
		block-size: 1px;
		position: absolute;
		inset-block-start: 0.65em;
		inline-size: 100%;
		z-index: 0;
		background: var(--color-line);
	}

	.hline h3 span {
		padding: 0 0.65em 0 0;
		background: var(--color-white);
		display: inline-block;
		position: relative;
		z-index: 1;
		color: var(--color-ink);
	}

	.hlinea h3 span {
		padding: 0 0.65em 0 0;
		background: none;
		display: inline-block;
		position: relative;
		z-index: 1;
		color: var(--color-white);
	}

	.vmore a::after {
		content: "\203A";
		margin-inline-start: 0.3em;
		color: var(--color-accent);
	}

	.vmore {
		position: absolute;
		inset-block-start: -6px;
		inset-inline-end: 0;
		padding: 0;
		background: var(--color-white);
	}

	/* Gallery */
	.gallery {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		margin-block-end: 2em;
	}

	.gallery-item img {
		max-inline-size: 100%;
		block-size: auto;
		vertical-align: top;
		border-radius: var(--radius);
		transition: filter var(--transition), transform var(--transition);
	}

	.gallery-item a:hover img {
		filter: brightness(0.9);
		transform: scale(1.015);
	}

	/* Vocabulary cards */
	.card {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		margin-block-end: 2em;
		justify-content: start;
	}

	.card div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--color-line);
		padding: 1em;
		background: var(--color-paper);
		block-size: 100px;
		position: relative;
		line-height: 1.4em;
		border-radius: var(--radius);
		transition: border-color var(--transition), background var(--transition);
	}

	.card div:hover {
		border-color: var(--color-accent);
		background: var(--color-accent-soft);
	}

	.card div span {
		display: none;
		font-size: 0.9em;
	}

	.card div span.show {
		display: block;
	}

	.card div .delbtn {
		position: absolute;
		inset-block-end: 0.2em;
		inset-inline-end: 0.5em;
		box-shadow: none;
		font-size: 0.8em;
	}

	.addword input[type="text"] {
		inline-size: 200px;
		max-inline-size: 30% !important;
		float: inline-start;
		margin-inline-end: 0.5em;
	}

	.addword button {
		block-size: 3.65em;
	}

	.addword .addttl {
		margin-block-end: 0.5em;
	}

	button.copy-btn {
		position: absolute;
		inset-block-end: 0;
		inset-inline-start: 0;
		box-shadow: none;
		font-size: 1em;
		block-size: 2em;
		line-height: 2em;
		padding-inline: 0.5em;
		background: transparent;
	}

	.loginlink {
		display: block;
		font-size: 0.75em;
	}

	.loginlink a {
		background: var(--color-paper);
		padding: 0.25em 0.45em;
		block-size: auto;
		line-height: 1.6;
		margin-inline-start: 0.3em;
		border-radius: var(--radius);
		border: 1px solid var(--color-line);
	}

	/* Front-page upload form helpers */
	.fpinr {
		margin-block-end: 1em;
	}

	.fpinr h5 {
		margin-block-end: 0;
	}

	.fpinr label {
		display: inline-block;
		margin-block-end: 6px;
	}

	.fpwapper {
		max-inline-size: 42rem;
		inline-size: 100%;
		margin: 0 auto;
		padding: 2em 0 4em;
	}

	.fpwapper input[type="date"] {
		inline-size: 100%;
		line-height: 2.4em;
	}

	.fpwapper .file-button {
		border: 2px dashed color-mix(in srgb, var(--color-ink) 35%, transparent);
		padding: 2em;
		inline-size: 100%;
		cursor: pointer;
		border-radius: var(--radius);
		background: var(--color-paper);
		transition: border-color var(--transition), background var(--transition);
	}

	.fpwapper .file-button:hover {
		border-color: var(--color-accent);
		background: var(--color-accent-soft);
	}

	.fpwapper .file-button::file-selector-button {
		font-weight: 700;
		color: white;
		background: var(--color-ink);
		font-size: 0.85rem;
		font-family: var(--font-display);
		border: 0;
		border-radius: var(--radius);
		padding: 0.55em 1em;
		cursor: pointer;
	}

	.fpwapper .button.fit {
		block-size: 3.5em;
	}

	/* Home grid hide rules */
	@media (max-width: 1680px) {
		.home .alubumlist .posts .post:nth-child(n+24):not(:last-child) { display: none; }
	}

	@media (max-width: 1430px) {
		.home .alubumlist .posts .post:nth-child(n+20):not(:last-child) { display: none; }
	}

	@media (max-width: 1164px) {
		.home .alubumlist .posts .post:nth-child(n+16):not(:last-child) { display: none; }
	}

	@media (max-width: 1016px) {
		.home .alubumlist .posts .post:nth-child(n+15):not(:last-child) { display: none; }
	}

	@media (max-width: 874px) {
		.home .alubumlist .posts .post:nth-child(n+12):not(:last-child) { display: none; }
	}

	@media (max-width: 980px) {
		.snaplist .posts .post:nth-child(n+24):not(:last-child) { display: none; }
		.card { gap: 0.65rem; }
	}

	@media (max-width: 957px) {
		.snaplist .posts .post:nth-child(n+21):not(:last-child) { display: none; }
	}

	@media (max-width: 847px) {
		.snaplist .posts .post:nth-child(n+18):not(:last-child) { display: none; }
	}

	@media (max-width: 693px) {
		.snaplist .posts .post:nth-child(n+15):not(:last-child) { display: none; }
	}

	@media (max-width: 583px) {
		.snaplist .posts .post:nth-child(n+12):not(:last-child) { display: none; }
	}

	@media (max-width: 1280px) {
		.card {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		}
	}

	@media (max-width: 736px) {
		.card div {
			display: block;
		}

		.card {
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
		}

		.page-id-56299 .diary-wrapper {
			text-align: start;
		}

		#main .tagtop a {
			background: var(--color-white);
			padding-inline: 0.5em;
			line-height: 2em;
			block-size: 2em;
		}

		div#mfp_thanks strong {
			display: inline;
		}
	}

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

		[data-reveal] {
			animation: none;
		}
	}
}

/* -------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* -------------------------------------------------------------------------- */

@layer utilities {
	.align-left { text-align: start; }
	.align-center { text-align: center; }
	.align-right { text-align: end; }

	.fright { text-align: end; }

	.divleft { float: inline-start; inline-size: 50%; }
	.divright { float: inline-end; inline-size: 50%; }
	.divleft.seventhree { inline-size: 70%; }
	.divright.seventhree { inline-size: 30%; }
	.mbtm { margin-block-end: 1em; }

	/* Back to Top — left-aligned, unboxed, decorative */
	ul.align-right.last,
	ul.actions.align-right.last,
	ul.backnav,
	ul.last {
		margin: 1.75rem 0 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		gap: 1.25rem;
	}

	.content > hr + ul.align-right.last,
	.content > hr + ul.actions.align-right.last,
	.content > hr + ul.backnav,
	.content > hr + ul.last {
		margin-block-start: 0;
	}

	.content > hr:has(+ ul.align-right.last),
	.content > hr:has(+ ul.actions.align-right.last),
	.content > hr:has(+ ul.backnav),
	.content > hr:has(+ ul.last) {
		border: 0;
		block-size: 0;
		margin: 2.25rem 0 1.25rem;
		border-block-start: 1px solid var(--color-line);
	}

	ul.last .button,
	ul.align-right.last .button,
	ul.backnav .button {
		appearance: none;
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 0.55em;
		block-size: auto;
		line-height: 1.2;
		padding: 0.35em 0 0.45em;
		margin: 0;
		border: 0;
		box-shadow: none !important;
		background: transparent !important;
		color: var(--color-ink) !important;
		font-family: var(--font-display);
		font-size: 0.78em;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		opacity: 0.55;
		transition:
			color 0.45s var(--ease),
			opacity 0.45s var(--ease),
			transform 0.45s var(--ease),
			letter-spacing 0.45s var(--ease);
	}

	ul.last .button::after,
	ul.align-right.last .button::after,
	ul.backnav .button::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-end: 0;
		inline-size: 100%;
		block-size: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.45s var(--ease), background-color 0.45s var(--ease);
		opacity: 0.35;
	}

	ul.last .button.icon::before,
	ul.align-right.last .button.icon::before,
	ul.backnav .button.icon::before {
		margin: 0;
		font-size: 0.9em;
		line-height: 1;
		opacity: 0.7;
		transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), color 0.45s var(--ease);
	}

	ul.last .button:hover,
	ul.align-right.last .button:hover,
	ul.backnav .button:hover,
	ul.last .button:focus-visible,
	ul.align-right.last .button:focus-visible,
	ul.backnav .button:focus-visible,
	ul.last .button:active,
	ul.align-right.last .button:active,
	ul.backnav .button:active {
		color: var(--color-ink) !important;
		background: transparent !important;
		box-shadow: none !important;
		opacity: 1;
		letter-spacing: 0.12em;
		transform: translateX(-0.12em);
	}

	ul.last .button:hover::after,
	ul.align-right.last .button:hover::after,
	ul.backnav .button:hover::after,
	ul.last .button:focus-visible::after,
	ul.align-right.last .button:focus-visible::after,
	ul.backnav .button:focus-visible::after {
		transform: scaleX(1);
		background: var(--color-accent);
		opacity: 1;
	}

	ul.last .button:hover::before,
	ul.align-right.last .button:hover::before,
	ul.backnav .button:hover::before {
		transform: translateX(-0.2em);
		opacity: 1;
		color: var(--color-accent);
	}

	.clearfix::before,
	.clearfix::after {
		display: table;
		line-height: 0;
		content: "";
	}

	.clearfix::after {
		clear: both;
	}

	.monly {
		display: none !important;
	}

	.ponly {
		display: block !important;
	}

	@media (max-width: 736px) {
		.monly {
			display: block !important;
		}

		.ponly {
			display: none !important;
		}
	}
}

/* Unlayered: beat WP global-styles `body { padding: 0 }` so fixed header does not clip content */
html body {
	padding-top: var(--header-height);
	padding-block-start: var(--header-height);
}

@media (max-width: 736px) {
	html body {
		padding-top: var(--header-height-sm);
		padding-block-start: var(--header-height-sm);
	}
}

/* Mailform: force Send white text + Reset right */
div.mfp_buttons {
	justify-content: space-between !important;
}

div.mfp_buttons button[type="submit"],
div.mfp_buttons .btn.btn-success:not(.reset),
div.mfp_buttons .mfp-btn-send,
div.mfp_buttons button#mfp_button_send {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

div.mfp_buttons button[type="reset"],
div.mfp_buttons .btn.btn-success.reset,
div.mfp_buttons .mfp-btn-reset,
div.mfp_buttons button#mfp_button_cancel {
	margin-inline-start: auto !important;
}

/* Header Contact CTA: mail icon, no frame */
#header nav > ul > li a.nav-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	inline-size: 2rem !important;
	block-size: 2rem !important;
	min-inline-size: 2rem !important;
	min-block-size: 2rem !important;
	max-inline-size: 2rem !important;
	max-block-size: 2rem !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	box-sizing: border-box !important;
}

#header nav > ul > li a.nav-cta:hover,
#header nav > ul > li a.nav-cta:focus-visible {
	inline-size: 2rem !important;
	block-size: 2rem !important;
	min-inline-size: 2rem !important;
	min-block-size: 2rem !important;
	max-inline-size: 2rem !important;
	max-block-size: 2rem !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--color-accent) !important;
	line-height: 1 !important;
}