/* aard.theaardvark.css — per-site theme for theaardvark.co.uk
   Variable layer loaded after aard.css. One light-dark() per role (aardCSS Phase 0);
   no [data-theme=dark] or @media duplicates. Light = Dusty Rose with a teal hero.
   Dark = deep teal with yellow as the action colour. Never edit aard.css itself.
   TODO: run colour-workflow.md stage 3 (WhoCanUse) over these pairs before launch. */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("/fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("/fonts/atkinson-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
	src: url("/fonts/atkinson-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap;
	src: url("/fonts/atkinson-700-italic.woff2") format("woff2"); }

:root {
	--aard-font-family: "Atkinson Hyperlegible", system-ui, sans-serif;

	/* Body text colour that links cannot rewrite */
	--text-body: light-dark(#3a2820, #f0e8e4);

	/* Surfaces and text */
	--aard-background-color:   light-dark(#f0e8e4, hsl(193 53% 14%));
	--aard-color:              light-dark(#3a2820, #f0e8e4);
	--aard-muted-color:        light-dark(#602820, #d4c0b8);
	--aard-muted-border-color: light-dark(#d4c0b8, hsl(193 53% 26%));
	/* aardCSS default field borders are about 1.3:1 on this palette. WCAG 1.4.11 needs 3:1. */
	--aard-form-element-border-color: light-dark(#7a5a50, #a89890);

	/* primary — teal; yellow in dark */
	--aard-primary:                  light-dark(hsl(193 53% 28%), hsl(40 100% 60%));
	--aard-primary-hover:            light-dark(hsl(193 53% 22%), hsl(40 100% 70%));
	--aard-primary-background:       light-dark(hsl(193 53% 28%), hsl(40 100% 60%));
	--aard-primary-hover-background: light-dark(hsl(193 53% 22%), hsl(40 100% 52%));
	--aard-primary-border:           var(--aard-primary-background);
	--aard-primary-hover-border:     var(--aard-primary-hover-background);
	--aard-primary-inverse:          light-dark(#fff, #3a2820);
	--aard-primary-focus:            light-dark(hsl(193 53% 28% / 0.7), hsl(40 100% 60% / 0.7));
	--aard-primary-underline:        light-dark(hsl(193 53% 28% / 0.4), hsl(40 100% 60% / 0.4));

	/* secondary — mid dusty rose; teal in dark */
	--aard-secondary:                  light-dark(#7a5a50, #d4c0b8);
	--aard-secondary-hover:            light-dark(#5e4239, #f0e8e4);
	--aard-secondary-background:       light-dark(#c4aca4, hsl(193 53% 28%));
	--aard-secondary-hover-background: light-dark(#b39a91, hsl(193 53% 34%));
	--aard-secondary-border:           var(--aard-secondary-background);
	--aard-secondary-hover-border:     var(--aard-secondary-hover-background);
	--aard-secondary-inverse:          light-dark(#3a2820, #f0e8e4);
	--aard-secondary-focus:            light-dark(rgb(196 172 164 / 0.5), hsl(193 53% 28% / 0.5));
	--aard-secondary-underline:        light-dark(rgb(122 90 80 / 0.4), rgb(212 192 184 / 0.4));

	/* tertiary — light dusty rose; deeper teal in dark */
	--aard-tertiary:                  light-dark(#7a5a50, #d4c0b8);
	--aard-tertiary-hover:            light-dark(#5e4239, #f0e8e4);
	--aard-tertiary-background:       light-dark(#d4c0b8, hsl(193 53% 22%));
	--aard-tertiary-hover-background: light-dark(#c4aca4, hsl(193 53% 28%));
	--aard-tertiary-border:           var(--aard-tertiary-background);
	--aard-tertiary-hover-border:     var(--aard-tertiary-hover-background);
	--aard-tertiary-inverse:          light-dark(#3a2820, #f0e8e4);
	--aard-tertiary-focus:            light-dark(rgb(212 192 184 / 0.5), hsl(193 53% 22% / 0.5));
	--aard-tertiary-underline:        light-dark(rgb(122 90 80 / 0.4), rgb(212 192 184 / 0.4));

	/* contrast — body text colour as a button */
	--aard-contrast:                  light-dark(#3a2820, #f0e8e4);
	--aard-contrast-hover:            light-dark(#602820, #fff);
	--aard-contrast-background:       light-dark(#3a2820, #f0e8e4);
	--aard-contrast-hover-background: light-dark(#602820, #fff);
	--aard-contrast-border:           var(--aard-contrast-background);
	--aard-contrast-hover-border:     var(--aard-contrast-hover-background);
	--aard-contrast-inverse:          light-dark(#f0e8e4, hsl(193 53% 14%));
	--aard-contrast-focus:            light-dark(rgb(58 40 32 / 0.35), rgb(240 232 228 / 0.35));
	--aard-contrast-underline:        light-dark(rgb(58 40 32 / 0.4), rgb(240 232 228 / 0.4));

	/* accent — yellow, for highlights and badges */
	--aard-accent:                  light-dark(#8a5a00, hsl(40 100% 60%));
	--aard-accent-hover:            light-dark(#6e4800, hsl(40 100% 70%));
	--aard-accent-background:       hsl(40 100% 60%);
	--aard-accent-hover-background: hsl(40 100% 52%);
	--aard-accent-border:           var(--aard-accent-background);
	--aard-accent-hover-border:     var(--aard-accent-hover-background);
	--aard-accent-inverse:          #3a2820;
	--aard-accent-focus:            hsl(40 100% 60% / 0.4);
	--aard-accent-underline:        light-dark(rgb(138 90 0 / 0.4), hsl(40 100% 60% / 0.4));

	/* Section identities: nav pills, card tags, bento tiles */
	--aard-section-bits:    light-dark(#8f4400, hsl(30 90% 65%));
	--aard-section-shallow: light-dark(#8b2525, hsl(0 70% 77%));
	--aard-section-aardhd:  light-dark(#5a3a80, hsl(270 50% 75%));
	--aard-section-music: light-dark(#256025, hsl(120 40% 65%));
	--aard-section-me:    light-dark(#99215f, hsl(325 75% 78%));
}

/* Bento: featured post, About and Irregular tiles. One column on phones. */
.bento {
	display: grid;
	gap: 1rem;
	margin-block: 1.5rem;
}
@media (min-width: 768px) {
	.bento { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
	.bento .bento-featured { grid-row: 1 / span 2; }
}
.bento-featured {
	background-color: hsl(193 53% 28%);
	color: #fff;
	position: relative;
	border-radius: var(--aard-border-radius, 0.5rem);
	padding: 1.5rem 1.5rem 1.75rem;
	overflow: hidden;
}
.bento-featured h2, .bento-featured a, .bento-featured p, .bento-featured time { color: inherit; }
.bento-featured h2 { margin-block: 0.25rem 0.75rem; }
.bento-featured::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 4px;
	background-color: hsl(40 100% 60%);
}
.bento-kicker { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(40 100% 72%) !important; }
.bento-tile {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem;
	border-radius: var(--aard-border-radius, 0.5rem);
	background-color: var(--aard-tertiary-background);
	color: var(--text-body);
	text-decoration: none;
}
.bento-tile strong { font-size: 1.1rem; color: var(--aard-primary-hover); }
.bento-tile:hover { background-color: var(--aard-secondary-background); }

/* Section signposts: one small tile for each section, with its colour dot */
.signposts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0.75rem;
	margin-bottom: 2rem;
}
.signpost {
	display: flex;
	flex-direction: column;
	padding: 0.75rem 1rem;
	border-radius: var(--aard-border-radius, 0.5rem);
	border: 1px solid var(--aard-muted-border-color);
	border-left: 6px solid var(--signpost-colour, var(--aard-muted-border-color));
	color: var(--text-body);
	text-decoration: none;
	min-height: var(--aard-tap-min, 44px);
}
.signpost:hover { background-color: var(--aard-tertiary-background); }
.signpost-name { font-weight: 700; }
.signpost small { color: var(--aard-muted-color); }
.signpost--bits    { --signpost-colour: var(--aard-section-bits); }
.signpost--shallow { --signpost-colour: var(--aard-section-shallow); }
.signpost--aardhd  { --signpost-colour: var(--aard-section-aardhd); }
.signpost--music { --signpost-colour: var(--aard-section-music); }
.signpost--me { --signpost-colour: var(--aard-section-me); }

/* Post cards: a coloured top edge for the section */
.post-card { border-top: 4px solid var(--card-colour, var(--aard-muted-border-color)); height: calc(100% - var(--aard-block-spacing-vertical, 1rem)); }
.post-card h2 { font-size: 1.25rem; margin-block: 0.5rem 0; }
.post-card h2 a { color: var(--text-body); text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; }
.post-card--bits    { --card-colour: var(--aard-section-bits); }
.post-card--shallow { --card-colour: var(--aard-section-shallow); }
.post-card--aardhd  { --card-colour: var(--aard-section-aardhd); }
.post-card--music { --card-colour: var(--aard-section-music); }
.post-card--me { --card-colour: var(--aard-section-me); }

/* Nav pills: tint and text both come from the section variable */
.nav-pill {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border-radius: 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.nav-pill:hover { opacity: 0.8; text-decoration: none; }
.nav-pill[aria-current="page"] { outline: 2px solid currentColor; outline-offset: 2px; }

.nav-pill--bits    { color: var(--aard-section-bits);    background-color: color-mix(in srgb, var(--aard-section-bits) 14%, transparent); }
.nav-pill--shallow { color: var(--aard-section-shallow); background-color: color-mix(in srgb, var(--aard-section-shallow) 14%, transparent); }
.nav-pill--aardhd  { color: var(--aard-section-aardhd);  background-color: color-mix(in srgb, var(--aard-section-aardhd) 14%, transparent); }
.nav-pill--music { color: var(--aard-section-music); background-color: color-mix(in srgb, var(--aard-section-music) 14%, transparent); }
.nav-pill--me { color: var(--aard-section-me); background-color: color-mix(in srgb, var(--aard-section-me) 14%, transparent); }
.nav-pill--about   { color: var(--aard-primary);         background-color: color-mix(in srgb, var(--aard-primary) 12%, transparent); }
.nav-pill--contact { color: var(--aard-contrast);        background-color: color-mix(in srgb, var(--aard-contrast) 10%, transparent); }

/* Inside the burger menu aardCSS sets its own link colour, which is more specific
   than .nav-pill--*. Repeat the section colours at menu specificity. */
nav > .navbar-menu > li > a.nav-pill--bits    { color: var(--aard-section-bits); }
nav > .navbar-menu > li > a.nav-pill--shallow { color: var(--aard-section-shallow); }
nav > .navbar-menu > li > a.nav-pill--aardhd  { color: var(--aard-section-aardhd); }
nav > .navbar-menu > li > a.nav-pill--music { color: var(--aard-section-music); }
nav > .navbar-menu > li > a.nav-pill--me { color: var(--aard-section-me); }
nav > .navbar-menu > li > a.nav-pill--about   { color: var(--aard-primary); }
nav > .navbar-menu > li > a.nav-pill--contact { color: var(--aard-contrast); }

/* Between the burger breakpoint (640px) and about 1024px the seven pills do not fit on one line.
   Keep each pill whole and let the row wrap, instead of squeezing the labels or overflowing the page. */
@media (min-width: 640px) {
	nav > .navbar-menu { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.25rem; }
	nav > .navbar-menu > li > a.nav-pill { white-space: nowrap; }
}

/* Tap targets: 44px minimum for menu links on phones */
@media (max-width: 639px) {
	nav > .navbar-menu > li > a.nav-pill { min-height: var(--aard-tap-min, 44px); display: flex; align-items: center; }
}

/* Embeds from old posts carry fixed width and height attributes */
.e-content iframe, .post__video iframe {
	max-width: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
/* Images inside posts and pages */
.e-content img { max-width: 100%; height: auto; border-radius: var(--aard-border-radius, 0.5rem); }
.e-content figure { margin: 1.5rem 0; }
.e-content figcaption { margin-top: 0.5rem; color: var(--aard-muted-color); font-size: 0.9em; text-align: center; }
.e-content img.post__image--center, .e-content img.align-center { display: block; margin-inline: auto; }
.e-content video { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--aard-border-radius, 0.5rem); }
.e-content .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin: 1.5rem 0; }
.e-content .gallery figure { margin: 0; }

/* Click-to-load video placeholder (js/video-gate.js swaps in the real player on Play) */
.video-gate {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
	box-sizing: border-box; width: 100%; aspect-ratio: 16 / 9; padding: 1rem; margin: 1.5rem 0; text-align: center;
	border: 1px solid var(--aard-muted-border-color); border-radius: var(--aard-border-radius, 0.5rem);
}
.video-gate p { margin: 0; max-width: 40rem; font-size: 0.9em; color: var(--aard-muted-color); }
.video-gate button { margin: 0; min-height: var(--aard-tap-min, 44px); }

/* An image that failed to load (js/image-fallback.js adds the class). The browser shows the
   alt text in its place, so box it and label it: otherwise it reads like the post's own text. */
.e-content img.img-failed, .post-image img.img-failed {
	display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: auto; min-height: 0;
	padding: 1rem; border: 2px dashed var(--aard-muted-color); border-radius: var(--aard-border-radius, 0.5rem);
	color: var(--aard-muted-color); font-size: 0.9em; font-style: italic; line-height: 1.5;
}
img.img-failed::before {
	content: "Image not available"; display: block; margin-bottom: 0.35rem;
	font-size: 0.75rem; font-style: normal; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}

/* Tap targets: 44px for the header brand and every footer link */
header nav > ul:first-child a { display: inline-flex; align-items: center; min-height: var(--aard-tap-min, 44px); }
footer a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--aard-tap-min, 44px); }
/* Footer links wrap as whole links; each dot travels with the link before it */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.5rem; }
.footer-links a:not(:last-child)::after { content: "·"; margin-left: 0.5rem; text-decoration: none; }
footer nav[aria-label="Social media links"] a { min-width: var(--aard-tap-min, 44px); }
.bento-tile, .bento-tile span { color: var(--text-body); }
.bento-tile strong { color: var(--aard-primary-hover); }

/* Page layout: content with a sidebar from 1024px, stacked below */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1024px) {
	.layout { grid-template-columns: minmax(0, 1fr) 19rem; }
}
.sidebar-box { margin-bottom: 1.5rem; padding: 1rem 1.1rem; border: 1px solid var(--aard-muted-border-color); border-radius: var(--aard-border-radius, 0.5rem); }
.sidebar-box h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.sidebar-links { list-style: none; padding: 0; margin: 0; }
.sidebar-links li { margin: 0; padding: 0; }
.sidebar-links a { display: inline-flex; align-items: center; min-height: var(--aard-tap-min, 44px); }
.sidebar-signup { background-color: var(--aard-tertiary-background); }
.social-icons { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; padding: 0; margin: 0; }
.social-icons li { margin: 0; padding: 0; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--aard-tap-min, 44px); min-height: var(--aard-tap-min, 44px); }

/* Post page */
.post-image { margin: 1rem 0; }
.post-image img { width: 100%; height: auto; border-radius: var(--aard-border-radius, 0.5rem); }
.post-tags { color: var(--aard-muted-color); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block: 1.5rem; }
.share a[role="button"] { min-height: var(--aard-tap-min, 44px); display: inline-flex; align-items: center; margin: 0; }
.comments { margin-top: 2rem; }
.topic-list { list-style: none; padding: 0; columns: 2 14rem; }
.topic-list li { margin-bottom: 0.5rem; }

/* Links in prose boxes and topic lists: 44px targets */
.sidebar-box p a:not([role="button"]), .topic-list a { display: inline-flex; align-items: center; min-height: var(--aard-tap-min, 44px); }
.topic-list li { margin-bottom: 0; }
#mastodon-dialog .dialog-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.link-button { background: none; border: 0; padding: 0 0.25rem; width: auto; color: var(--aard-primary); text-decoration: underline; min-height: var(--aard-tap-min, 44px); }

/* aardCSS link rules beat the plain tile selectors; repeat with more weight. */
/* Not var(--aard-color): aardCSS rewrites that variable to the link colour inside every <a>. */
section.bento a.bento-tile, section.bento a.bento-tile > span, section.bento a.bento-tile:hover > span { color: var(--text-body); }
section.bento a.bento-tile > strong { color: var(--aard-primary-hover); }

/* Sign-up form: the honeypot field stays out of sight and out of the tab order */
.subscribe-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.subscribe-form { max-width: 28rem; }

/* Keyboard focus: a ring in the text colour with a gap, so it never merges with a button */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
	outline: 3px solid var(--text-body);
	outline-offset: 2px;
	box-shadow: none;
}

/* Carbon badge (partials/sidebar.html, filled in by scripts/carbon-stamp.mjs): a two-part pill, then a line beneath.
   Colours come from the theme tokens, so it follows light, dark and the toggle. */
.carbon { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin: 1rem 0 0; }
.carbon-badge {
	display: inline-flex; align-items: stretch; overflow: hidden; text-decoration: none;
	border: 2px solid var(--aard-primary); border-radius: 0.5rem; font-size: 0.9rem; line-height: 1.2;
}
.carbon-value { display: flex; align-items: center; padding: 0.4rem 0.7rem; color: var(--aard-color); background: var(--aard-background-color); }
.carbon-brand { display: flex; align-items: center; padding: 0.4rem 0.7rem; font-weight: 700; color: var(--aard-primary-inverse); background: var(--aard-primary); }
.carbon small { color: var(--aard-muted-color); }

/* Search */
.search-results { list-style: none; padding: 0; }
.search-results li { margin-bottom: 1.25rem; }
.search-results a { display: inline-flex; align-items: center; min-height: var(--aard-tap-min, 44px); }
.search-results p { margin: 0; }