/*
 * aarmoury.css: art direction for aarmoury.uk. Loaded after aard.css and
 * aard.aarmouryuk.css. Colours come from the theme file's variables; this
 * file only lays things out and decorates them.
 *
 * Concept: a heraldic forge drawn on a blueprint. Blackletter wordmark that
 * heats and cools (variable-font weight), a CSS-only heater shield hatched in
 * Petra Sancta tinctures (vertical lines = gules, dots = or), a motto scroll,
 * drafting annotations, film grain. No images, no JS beyond the theme toggle.
 */

@font-face {
	font-family: "Grenze Gotisch";
	src: url("/fonts/grenze-gotisch-latin-var.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--ember: var(--aard-primary);
	--brass: var(--aard-accent);
	--ink: var(--aard-color);
	--page: var(--aard-background-color); /* plain buttons re-point --aard-background-color on hover, so use this for the page colour */
	--hair: light-dark(rgba(22, 18, 15, 0.09), rgba(237, 227, 209, 0.06));
	--glow: light-dark(rgba(163, 32, 15, 0.18), rgba(255, 106, 43, 0.55));
	--grid: 6rem;
}

/* ---- Surface: blueprint grid, ember heat from below, grain on top ---- */

body {
	min-height: 100svh;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	background-color: var(--aard-background-color);
	background-image:
		radial-gradient(120% 60% at 50% 115%, var(--glow), transparent 70%),
		repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px var(--grid)),
		repeating-linear-gradient(0deg, var(--hair) 0 1px, transparent 1px var(--grid));
	background-attachment: fixed;
}

body.is-page {
	grid-template-rows: 1fr auto;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 10;
	opacity: 0.16;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
	background: var(--ember);
	color: var(--aard-primary-inverse);
}

/* ---- Ticker ---- */

.ticker {
	overflow: hidden;
	border-block: 1px solid var(--ink);
	font-size: var(--aard-step--1);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ticker-track {
	display: inline-flex;
	padding-block: 0.6rem;
}

.ticker-track span::after {
	content: "\2720";
	margin-inline: 1.5em;
	color: var(--ember);
}

/* ---- Home: the forge ---- */

.forge {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--aard-space-l-xl);
	padding: var(--aard-space-xl-2xl) var(--aard-space-m-l);
	overflow: clip;
}

.annot {
	position: absolute;
	font-size: var(--aard-step--2);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--aard-muted-color);
}

.annot-fig {
	top: 1.25rem;
	left: var(--aard-space-m-l);
}

.annot-plate {
	right: 1.25rem;
	top: 50%;
	writing-mode: vertical-rl;
}

/* Shield: a heater shield is a box with a two-radius bottom. */

.arms {
	position: relative;
	display: grid;
	place-items: center;
	padding: 2.5rem;
}

.arms::before {
	content: "";
	position: absolute;
	inset: -10%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent, var(--glow), transparent 30%, var(--glow) 55%, transparent 70%);
	filter: blur(28px);
}

.shield {
	position: relative;
	width: clamp(7rem, 18vw, 15rem);
	aspect-ratio: 5 / 6;
	border: 0.35rem solid var(--ink);
	border-radius: 0.2rem 0.2rem 50% 50% / 0.2rem 0.2rem 62% 62%;
	outline: 1px solid var(--ink);
	outline-offset: 0.45rem;
	overflow: hidden;
	background:
		repeating-linear-gradient(90deg, var(--ember) 0 2px, transparent 2px 7px),
		var(--aard-background-color);
	rotate: -4deg;
	box-shadow: 0 1.5rem 3rem -1rem var(--glow);
}

.shield-bend {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle, var(--brass) 1.4px, transparent 1.6px) 0 0 / 7px 7px,
		var(--aard-background-color);
	clip-path: polygon(0 0, 26% 0, 100% 74%, 100% 100%, 74% 100%, 0 26%);
}

.shield-charge {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding-bottom: 12%;
	font-family: var(--aard-font-heading);
	font-weight: 900;
	font-size: clamp(4rem, 11vw, 9rem);
	line-height: 1;
	color: var(--aard-background-color);
	-webkit-text-stroke: 0.08em var(--ink);
	paint-order: stroke fill;
}

/* Title block */

.title-block {
	position: relative;
	min-width: 0;
	container-type: inline-size;
}

.the {
	margin: 0 0 -0.5em 0.3em;
	font-size: var(--aard-step-0);
	letter-spacing: 0.6em;
	text-transform: uppercase;
	color: var(--brass);
}

h1.wordmark {
	margin: 0;
	font-family: var(--aard-font-heading);
	font-weight: 500;
	font-size: 22cqi;
	line-height: 0.9;
	letter-spacing: -0.02em;
	white-space: nowrap;
	text-wrap: nowrap;
}

.wordmark span {
	display: inline-block;
	transition: color 0.2s, translate 0.2s, rotate 0.2s;
}

.wordmark span:hover {
	color: var(--ember);
	translate: 0 -0.06em;
	rotate: -4deg;
}

/* Drafting dimension line under the wordmark: ticks at each end. */

.dimension {
	position: relative;
	margin-block: 0.75rem 2.5rem;
	height: 1px;
	background: var(--aard-muted-color);
	font-size: var(--aard-step--2);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--aard-muted-color);
}

.dimension::before,
.dimension::after {
	content: "";
	position: absolute;
	top: -0.4rem;
	width: 1px;
	height: 0.8rem;
	background: currentColor;
}

.dimension::before { left: 0; }
.dimension::after { right: 0; }

.dimension span {
	position: absolute;
	left: 50%;
	translate: -50% -50%;
	padding-inline: 0.75em;
	white-space: nowrap;
	background: var(--aard-background-color);
}

/* Motto on a notched scroll */

.motto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 0;
}

.scroll {
	display: inline-block;
	padding: 0.35em 2.2em;
	font-family: var(--aard-font-heading);
	font-size: var(--aard-step-2);
	font-weight: 600;
	background: var(--ink);
	color: var(--aard-background-color);
	max-width: 100%;
	clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 50%, 100% 100%, 0 100%, 1em 50%);
	rotate: -1.5deg;
}

.motto small {
	font-size: var(--aard-step--1);
	color: var(--aard-muted-color);
}

@media (max-width: 48rem) {
	.forge {
		grid-template-columns: minmax(0, 1fr);
	}

	.arms {
		justify-self: start;
		padding: 1rem;
	}

	.scroll {
		padding-inline: 1.6em;
		font-size: var(--aard-step-1);
	}

	.annot-plate {
		display: none;
	}
}

/* ---- Documents: the charter ---- */

.charter {
	padding: var(--aard-space-l-xl) var(--aard-space-s-m);
}

.charter-back,
.charter-sheet {
	max-width: 46rem;
	margin-inline: auto;
}

.charter-back {
	font-size: var(--aard-step--1);
}

.charter-sheet {
	position: relative;
	padding: var(--aard-space-l-xl) var(--aard-space-m-l);
	background: var(--aard-card-background-color);
	border: 4px double var(--ink);
	box-shadow: 0.75rem 0.75rem 0 var(--ember);
	counter-reset: clause;
}

.charter-sheet::before,
.charter-sheet::after {
	content: "\2720";
	position: absolute;
	color: var(--ember);
	font-size: 1.25rem;
	line-height: 1;
}

.charter-sheet::before { top: 0.6rem; left: 0.7rem; }
.charter-sheet::after { bottom: 0.6rem; right: 0.7rem; }

.charter-sheet > header {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.charter-kicker {
	margin: 0;
	font-size: var(--aard-step--2);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--brass);
}

.charter h1 {
	margin-block: 0.2em 0.3em;
	font-size: clamp(3rem, 10vw, 6.5rem);
	font-weight: 700;
	line-height: 0.95;
}

.charter-seal {
	display: inline-block;
	margin: 0 0 var(--aard-space-l);
	padding: 0.3em 0.9em;
	border: 1px solid var(--ember);
	color: var(--ember);
	font-size: var(--aard-step--1);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	rotate: -2deg;
}

.charter-body > p:first-child::first-letter {
	float: left;
	margin: 0.05em 0.1em 0 0;
	font-family: var(--aard-font-heading);
	font-weight: 900;
	font-size: 4.2em;
	line-height: 0.8;
	color: var(--ember);
}

.charter-body h2 {
	position: relative;
	margin-top: var(--aard-space-l);
	font-size: var(--aard-step-3);
	font-weight: 600;
	counter-increment: clause;
}

.charter-body h2::before {
	content: "\00A7\00A0" counter(clause, upper-roman) "\00A0";
	color: var(--ember);
}

@media (min-width: 64rem) {
	.charter-sheet {
		padding-inline-start: 7rem;
	}

	.charter-body h2::before {
		position: absolute;
		right: 100%;
		padding-right: 1rem;
	}
}

.lost h1 {
	color: var(--ember);
}

/* ---- Colophon ---- */

.colophon {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem 2rem;
	padding: 1rem var(--aard-space-m-l);
	border-top: 1px solid var(--ink);
	font-size: var(--aard-step--1);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.colophon nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.5rem;
}

.colophon a {
	display: inline-flex;
	align-items: center;
	min-height: var(--aard-tap-min, 44px);
	color: inherit;
	text-underline-offset: 0.3em;
}

.colophon a:hover {
	color: var(--ember);
}

.colophon p {
	margin: 0;
	color: var(--aard-muted-color);
}

.theme-toggle {
	min-height: var(--aard-tap-min, 44px);
	margin: 0;
	padding: 0 0.9em;
	background: transparent;
	border: 1px solid var(--ink);
	border-radius: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.theme-toggle:hover {
	background: var(--ink);
	color: var(--page);
}

/* Pico draws a box-shadow ring on :focus, flush against the border. Replace it with a gapped outline on keyboard focus. */
.theme-toggle:focus { box-shadow: none; }
.theme-toggle:focus-visible {
	outline: 2px solid var(--aard-primary-focus);
	outline-offset: 2px;
}

.theme-state::after { content: "Auto"; }
[data-theme="light"] .theme-state::after { content: "Light"; }
[data-theme="dark"] .theme-state::after { content: "Dark"; }

/* ---- Motion: heat, turn, scroll. Only if the visitor allows it. ---- */

@media (prefers-reduced-motion: no-preference) {
	.ticker-track {
		animation: ticker 60s linear infinite;
	}

	.wordmark span {
		animation: temper 5s ease-in-out infinite;
		animation-delay: calc(var(--i) * -0.35s);
	}

	.arms::before {
		animation: turn 24s linear infinite;
	}

	.shield {
		animation: sway 9s ease-in-out infinite;
	}
}

@keyframes ticker {
	to { translate: -50% 0; }
}

@keyframes temper {
	0%, 100% { font-weight: 300; }
	50% {
		font-weight: 900;
		color: var(--ember);
		text-shadow: 0 0 0.12em var(--glow);
	}
}

@keyframes turn {
	to { rotate: 1turn; }
}

@keyframes sway {
	0%, 100% { rotate: -4deg; }
	50% { rotate: 2deg; }
}

/* ---- Charter furniture: summary, lists, flow diagrams ---- */

/* At-a-glance summary: the one boxed element on the privacy page. */
.blazon {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin-block: var(--aard-space-l);
	border: 1px solid var(--ink);
	background: var(--aard-background-color);
}

.blazon > div {
	padding: 0.75rem 1rem;
	border: 1px solid var(--hair);
	margin: 0;
}

.blazon dt {
	margin: 0;
	font-size: var(--aard-step-0);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass);
}

.blazon dd {
	margin: 0.2rem 0 0;
	font-family: var(--aard-font-heading);
	font-size: var(--aard-step-0);
	font-weight: 600;
	line-height: 1.2;
}

.charter-body ul {
	padding-left: 1.75rem;
}

.charter-body ul > li {
	list-style: none;
	position: relative;
}

.charter-body ul > li::before {
	content: "\2720";
	position: absolute;
	left: -1.6rem;
	color: var(--ember);
}

.charter-body ul.no > li::before {
	content: "\2715";
	font-weight: 700;
}

/* Numbered steps: big blackletter numerals in the gutter. */
.charter-body > ol {
	counter-reset: step;
	padding-left: 3rem;
}

.charter-body > ol > li {
	list-style: none;
	position: relative;
	counter-increment: step;
	margin-bottom: 0.9rem;
}

.charter-body > ol > li::before {
	content: counter(step);
	position: absolute;
	left: -3rem;
	top: -0.3em;
	font-family: var(--aard-font-heading);
	font-size: 2.2em;
	font-weight: 900;
	line-height: 1;
	color: var(--ember);
}

/* Flow: a vertical chain of stations joined by arrows. The charter
   measure is too narrow for four stations side by side. */
.flow {
	margin: var(--aard-space-l) 0;
}

.flow ol {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	max-width: 30rem;
	margin: 0;
	padding: 0;
	counter-reset: station;
}

.flow li {
	position: relative;
	display: grid;
	grid-template-columns: 3rem 1fr;
	align-items: baseline;
	column-gap: 0.5rem;
	margin: 0;
	padding: 0.75rem 1rem;
	list-style: none;
	border: 1px solid var(--ink);
	background: var(--aard-background-color);
	counter-increment: station;
}

.flow li::before {
	content: counter(station, upper-roman);
	grid-row: span 2;
	white-space: nowrap;
	font-size: var(--aard-step--2);
	letter-spacing: 0.2em;
	color: var(--brass);
}

.flow li:not(:last-child)::after {
	content: "\2193";
	position: absolute;
	left: 50%;
	bottom: -1.5rem;
	translate: -50% 0;
	color: var(--ember);
	font-weight: 700;
}

.flow strong {
	font-family: var(--aard-font-heading);
	font-size: var(--aard-step-1);
	font-weight: 700;
	line-height: 1.1;
}

.flow span {
	font-size: var(--aard-step--1);
	color: var(--aard-muted-color);
}

.flow figcaption {
	margin-top: 0.75rem;
	font-size: var(--aard-step--1);
	font-style: italic;
	color: var(--aard-muted-color);
}