/*--------------------------------------------------------------------------


	Typefolio

	0. Design tokens
	1. Body
	2. Typography
	3. Pages
		3.0. Common Elements
		3.1. Navigation
		3.2. Header
		3.3. Home
		3.4. About
		3.5. Works
		3.6. Shop
		3.7. Archive (Blog)
		3.8. Contact
		3.9. Footer
	4. Components
		4.1. Slider
		4.2. Slider thumbnails

	Load order: reset.css, typegrid.css, style.css.

--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
	Web font

	Inter, self-hosted. The template used to pull its web font from
	fonts.googleapis.com over plain HTTP, which meant a blocked request on
	any HTTPS site, two extra DNS lookups and connections on every page
	load, and a visitor IP address handed to a third party.

	One variable file covers every weight the design uses, from the 300 of
	the display lines to the 800 of the wordmark. Everything in between is
	600: the template never uses 700, which reads heavy in Inter at text
	sizes. Licence in
	fonts/LICENSE.txt (SIL Open Font License 1.1).
--------------------------------------------------------------------------*/

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}


/*--------------------------------------------------------------------------
	0. Design tokens

	Change a value here and it takes effect everywhere. The dark palette at
	the bottom of this block is what the template shows to visitors whose
	system is set to dark mode.
--------------------------------------------------------------------------*/

:root {
	color-scheme: light dark;

	/* Brand */
	--color-accent: #22eedd;
	--color-accent-hover: #12e5d3;

	/* A darkened accent for small text, which #22eedd is far too light for
	   (1.4:1 on white). This one clears WCAG AA at 5.1:1. */
	--color-accent-text: #097b72;

	/* Accent text on a dark panel or stage, where the raw accent is the
	   readable one in both themes. */
	--color-accent-invert: #22eedd;

	/* Surfaces */
	--color-bg: #fff;
	--color-bg-invert: #111;
	--color-bg-sunken: #f7f7f7;

	/* The disc a portrait drawing sits on. Light in both themes: a pencil
	   portrait cannot be inverted the way the line art is. */
	--color-plate: #f1f1f1;

	/*
		Dark panels (menus, inverted buttons, notices). These stay dark in
		dark mode too: a white panel flashing over a dark page is jarring,
		and the design was built around a black menu. In dark mode the panel
		lifts slightly off the page instead of inverting.
	*/
	--color-panel: #111;
	--color-on-panel: #fff;
	--color-panel-rule: #2a2a2a;

	/*
		The dropdown menu has its own surface rather than borrowing the dark
		panel. A black block stamped over the page every time the pointer
		crossed the bar; this sits just far enough off the page to read as a
		panel and no further.
	*/
	--color-menu: #f4f4f4;
	--color-on-menu: #111;
	--color-menu-rule: #e4e4e4;

	/* The stage a photograph sits on. Always dark, in both themes. */
	--color-stage: #111;
	--color-on-stage: #fff;
	--color-on-stage-muted: #8a8a8a;

	/* Text */
	--color-text: #111;
	--color-text-muted: #555;

	/* Replaces the old #aaa / #ccc / #ddd greys, which all failed contrast
	   against white. 5.0:1. */
	--color-text-subtle: #6f6f6f;
	--color-text-invert: #fff;

	/* Rules and borders */
	--color-rule: #e8e8e8;
	--color-rule-strong: #d4d4d4;
	--color-rule-invert: #2a2a2a;

	/* Status */
	--color-danger: #c62c10;
	--color-price: #c62c10;

	/* Text sitting on the accent fill. The accent is a light cyan, so this
	   has to stay dark in both themes (13:1 against the accent). */
	--color-on-accent: #111;

	/* Type

	   One family sets the whole template. Inter is drawn a touch wide for
	   its own defaults, so everything is tracked in slightly: a little at
	   text sizes, more on display lines, which need less air the larger
	   they get. */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--tracking-text: -0.011em;
	--tracking-display: -0.022em;
	--tracking-wordmark: -0.05em;

	/* Icons

	   Lucide chevrons (https://lucide.dev, ISC), inlined as masks so they
	   take the colour of the text they sit next to, in either theme, and
	   cost no request. */
	--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");

	/* Motion */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* Focus ring */
	--focus-ring: 2px solid var(--color-accent-text);
	--focus-ring-offset: 3px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #101010;
		--color-bg-invert: #f5f5f5;
		--color-bg-sunken: #181818;
		--color-plate: #dcdcdc;

		--color-text: #f2f2f2;
		--color-text-muted: #b8b8b8;
		--color-text-subtle: #9a9a9a;
		--color-text-invert: #101010;

		/* On a dark surface the raw accent has plenty of contrast, so text
		   can use it directly. */
		--color-accent-text: #35f0e0;


		--color-rule: #2a2a2a;
		--color-rule-strong: #3d3d3d;
		--color-rule-invert: #e0e0e0;

		--color-panel: #1e1e1e;
		--color-on-panel: #f2f2f2;
		--color-panel-rule: #383838;

		/* Same idea the other way up: one step off the page, not a white
		   sheet dropped over it. */
		--color-menu: #1d1d1d;
		--color-on-menu: #f2f2f2;
		--color-menu-rule: #303030;

		--color-stage: #000;

		--color-danger: #ff7a60;
		--color-price: #ff8a70;

		--focus-ring: 2px solid var(--color-accent);
	}
}


/*--------------------------------------------------------------------------
	1. Body
--------------------------------------------------------------------------*/

body {
	color: var(--color-text);
	background: var(--color-bg);
	font-family: var(--font-sans);

	/* Scales smoothly between phone and desktop instead of stepping at a
	   single breakpoint. The floor is 14px: nothing in the template is set
	   smaller than that. */
	font-size: clamp(0.875rem, 0.7825rem + 0.4vw, 0.9375rem);
	line-height: 1.85;
	letter-spacing: var(--tracking-text);
}


/*--------------------------------------------------------------------------
	2. Typography
--------------------------------------------------------------------------*/

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 600; }


/* Links */
a,
a:visited {
	color: var(--color-text-muted);
	text-decoration: none;
}

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

p a,
p a:visited { line-height: inherit; }

/*
	The template used to set `outline: 0` on every link, which removed the
	only cue keyboard users have about where they are. :focus-visible shows
	a ring for keyboard and assistive-tech users without putting one around
	everything a mouse touches.
*/
:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
	border-radius: 2px;
}


/* Fades in on hover. Used by the footer social links; this was a jQuery
   fadeTo() pair writing inline styles on every mouse event. */
.hoverMe {
	color: var(--color-text-subtle);
	transition: color var(--transition-base);
}

.hoverMe:hover,
.hoverMe:focus-visible { color: var(--color-text); }


/* Visibility */
.hide { display: none !important; }

/* Visible to screen readers, out of the way visually. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Jump link for keyboard users, revealed once focused. */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	padding: 12px 20px;
	color: var(--color-on-panel);
	background: var(--color-panel);
	font-size: 14px;
	font-weight: 600;
	transform: translateY(-120%);
	transition: transform var(--transition-fast);
}

.skip-link:focus {
	color: var(--color-on-panel);
	transform: translateY(0);
}


/* Selection Highlighted Text */
::selection {
	background: var(--color-accent);
	color: var(--color-text);
	text-shadow: none;
}


/* Formatting */
em,
i,
.italic { font-style: italic; }
b, strong { font-weight: 600; }

.underline {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color-accent);
}


/* Colors */
.font-color-primary { color: var(--color-accent-text); }
.background-color-primary { background: var(--color-accent); }

.font-color-secondary { color: var(--color-danger); }
.font-color-black { color: var(--color-text); }
.font-color-white { color: var(--color-text-invert); }
.background-color-white { background: var(--color-bg); }


/*--------------------------------------------------------------------------
	3. Pages
--------------------------------------------------------------------------*/

	/*---------------------------------------------------
			3.0 Common Elements
	---------------------------------------------------*/

	/* Responsive images */
	img { max-width: 100%; }


	/*
		The placeholder artwork is black line art on a transparent
		background, which vanishes on a dark page. Flipping it keeps the
		drawing readable in both themes.

		Put this on line art and logos only. A photograph given this class
		turns into a colour negative, so the .jpg placeholders deliberately
		do not carry it.
	*/
	@media (prefers-color-scheme: dark) {
		.invert-on-dark { filter: invert(1); }
	}


	/* Used to remove whitespace below an image */
	.remove-line-height { line-height: 0; }


	/* Vertical spacing */
	.padding-vertical { 
		padding-top: 50px; 
		padding-bottom: 50px;  
	}


	/* Used frequently to apply a light border on top */
	.border-top {
		border-top: 1px solid var(--color-rule);
		padding-top: 30px;
	}


	/* Featured image */
	.post img.featured { margin-bottom: 50px; }


	/*
		Buttons

		Scoped to the .button class rather than the bare <button> element.
		The slider arrows, the thumbnail strip and the labelled project nav
		are real buttons that carry their own look; as an element selector
		this skin's :hover rule outranked their `background: none` and filled
		them with accent whenever the pointer passed over.
	*/
	.button,
	a.button {
		color: var(--color-on-accent);
		background: var(--color-accent);
		font-size: 14px;
		line-height: 20px;
		font-weight: 600;
		text-align: center;
		padding: 13px 24px 12px 24px;
		border: 0;
		border-bottom: 2px solid var(--color-accent-hover);
		transition: background var(--transition-fast); 
		cursor: pointer;
		display: inline-block;
		box-sizing: border-box;
		border-radius: 4px;
	}

		.button.small,
		a.button.small {
			font-size: 14px;
			line-height: 20px;
			padding: 9px 18px 8px 18px;
			border-radius: 3px;
		}

		/* The full-width call to action. Taller than the inline button, but
		   sized to its label rather than to the column it happens to fill. */
		.button.full,
		a.button.full {
			display: block;
			width: 100%;
			border-radius: 5px;
			padding: 17px 32px 16px 32px;
			border-bottom: 3px solid var(--color-accent-hover);
		}

			.button:hover,
			a.button:hover { background: var(--color-accent-hover); }

			.button.black,
			a.button.black {
				color: var(--color-on-panel);
				background: var(--color-panel);
				border-color: var(--color-text); 
			}

			.button.black:hover,
			a.button.black:hover {
				color: var(--color-accent-invert);
				background: var(--color-panel);
			}


	/* Forms */
	form p,
	label,
	legend {
		font-size: 15px;
		line-height: 24px;
	}

	label {
		display: block;
		color: var(--color-text);
		font-size: 14px;
		line-height: 23px;
		margin: 20px 0;
	}

	input[type=text],
	input[type=url],
	input[type=tel],
	input[type=number],
	input[type=color],
	input[type=email], 
	input[type=password], 
	textarea,
	select {
		width: 100%;
		padding: 20px 25px;
		color: var(--color-text);
		background: var(--color-bg);
		margin: 0 0 15px 0;
		border: 1px solid var(--color-rule-strong);
		outline: none;
		box-sizing: border-box;
	}

		input[type=text]:focus,
		input[type=url]:focus,
		input[type=tel]:focus,
		input[type=number]:focus,
		input[type=color]:focus,
		input[type=email]:focus, 
		input[type=password]:focus, 
		textarea:focus,
		select:focus {
			color: var(--color-accent-text);
			border: 1px solid var(--color-accent);
		}


	/* Placeholder */
	::placeholder {
		color: var(--color-text-subtle);
		opacity: 1;
	}


	/* Input - submit */
	input[type=submit] {
		border: none; 
	}


	/* Required */
	span.required { color: var(--color-accent-text); }


	/* Page elements */
	.page p.title-desc {
		color: var(--color-text-subtle);
		font-weight: 600;
		margin-top: 0;
	}

	.page p.page-desc {
		color: var(--color-text);
		font-size: 34px;
		letter-spacing: var(--tracking-display);
		line-height: 60px;
		font-weight: 300; 
		margin-top: 30px;
		margin-bottom: 50px;
	}

		@media screen and (max-width: 767px) { 
			.page p.page-desc {
				font-size: 24px;
				line-height: 42px;
			}
		}

		@media screen and (max-width: 479px) { 
			.page p.page-desc {
				font-size: 20px;
				line-height: 36px;
			}
		}

	.page p { margin-top: 30px; }


	/*
		Sidebar (sticky)

		This used to be a jQuery plugin that cloned the sidebar, hid the
		original, and repositioned the copy on every scroll and resize event.
		CSS position: sticky does the same job natively, with no script, no
		duplicated DOM and no jank.

		The sticky element has to be the grid column itself: its containing
		block is .container, which is as tall as the main content, so the
		sidebar has room to travel. Putting sticky on the inner .sidebar
		would trap it inside a box its own height.
	*/
	.sidebar { padding-bottom: 20px; }

	@media screen and (min-width: 960px) {
		.container > .columns:has(> .sidebar.sticky) {
			position: sticky;
			top: 0;
			align-self: start;
			background: var(--color-bg);
			padding-bottom: 20px;
		}
	}


	/* Page Navigation */
	.nav-pages {
		font-size: 14px;
		margin-top: 30px;
	}

		.nav-pages a.link-prev,
		.nav-pages a.link-next {
			color: var(--color-text-muted);
			font-weight: 600;
			text-align: center;
			padding: 25px 0;
			display: block;
			width: 50%;
			float: left;
			box-sizing: border-box;
		}

			.nav-pages a.link-prev span,
			.nav-pages a.link-next span {
				display: inline-block;
				padding-bottom: 4px;
				border-bottom: 1px solid var(--color-text-muted);
			}

			.nav-pages a.link-prev div { padding-right: 33.33333333%; }
			
			@media screen and (min-width: 1300px) { 
				.nav-pages a.link-prev div { padding-right: 50%; }
			}

			@media screen and (max-width: 959px) { 
				.nav-pages a.link-prev div { padding-right: 0%; }
			}

			.nav-pages a.link-next div { padding-left: 33.33333333%; }

			@media screen and (min-width: 1300px) { 
				.nav-pages a.link-next div { padding-left: 50%; }
			}

			@media screen and (max-width: 959px) { 
				.nav-pages a.link-next div { padding-left: 0%; }
			}

			.nav-pages a:hover { color: var(--color-accent-text); }

				.nav-pages a:hover span { border-bottom-color: var(--color-accent-text); }

			.container .nav-pages a.link-prev,
			.container .nav-pages a.link-next { padding: 20px 0; }
			.container .nav-pages a.link-prev { text-align: left; }
			.container .nav-pages a.link-next { text-align: right; }


	/*---------------------------------------------------
			3.1 Navigation
	---------------------------------------------------*/

	/*
		The desktop bar is a flex row, so it fits any number of top-level
		items instead of assuming exactly four 25% cells.

		Submenus open on :hover and on :focus-within. The old build needed
		jQuery focus/blur handlers to add a .hover class for keyboard users;
		:focus-within covers that in CSS. The .hover class is still honoured
		so existing markup and scripts keep working.
	*/

	ul#nav {
		display: flex;
		flex-wrap: wrap;
		font-size: 14px;
		line-height: 21px;
		font-weight: 600;
	}

	/*
		Hide the whole bar, not just the list. Leaving an empty <nav> behind
		put two navigation landmarks with the same name in the accessibility
		tree at phone widths.
	*/
	@media screen and (max-width: 767px) {
		.topbar { display: none; }
	}

	ul#nav li { position: relative; }

	ul#nav > li { flex: 1 1 0; }

		ul#nav > li > a {
			color: var(--color-text-subtle);
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			padding: 18px 0 15px 0;
			margin: 0 20px;
			border-bottom: 1px solid var(--color-rule);
			transition: color var(--transition-fast);
		}

	ul#nav > li:hover,
	ul#nav > li:focus-within,
	ul#nav > li.hover {
		background: var(--color-menu);
	}

		ul#nav > li:hover > a,
		ul#nav > li:focus-within > a,
		ul#nav > li.hover > a {
			color: var(--color-on-menu);
			border-bottom-color: transparent;
			margin: 0;
			padding-inline: 20px;
		}

	/*
		Parent items keep a hairline under the label so the open submenu
		reads as attached. :has() finds them in CSS; the old build needed a
		jQuery pass to tag them with .hasChild, which is still honoured.
	*/
	ul#nav > li:has(> ul):hover > a,
	ul#nav > li:has(> ul):focus-within > a,
	ul#nav > li.hasChild:hover > a,
	ul#nav > li.hasChild:focus-within > a,
	ul#nav > li.hasChild.hover > a { border-bottom-color: var(--color-menu-rule); }

	/* Submenus */
	ul#nav li ul {
		background: var(--color-menu);
		box-shadow: 0 14px 28px rgb(0 0 0 / 0.07);
		width: 100%;
		min-width: 11rem;
		position: absolute;
		z-index: 10;
		top: 100%;
		left: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-fast), visibility var(--transition-fast);
	}

		ul#nav li:hover > ul,
		ul#nav li:focus-within > ul,
		ul#nav li.hover > ul {
			opacity: 1;
			visibility: visible;
		}

		ul#nav li ul a {
			color: var(--color-on-menu);
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			padding: 18px 20px;
			border-bottom: 1px solid var(--color-menu-rule);
			transition: color var(--transition-fast);
		}

		ul#nav li ul a:hover,
		ul#nav li ul a:focus-visible {
			color: var(--color-accent-text);
		}

		ul#nav li ul li:last-child > a { border-bottom: none; }

	/*
		Parent items carry a chevron at the far right of their own row:
		down for a submenu below, right for one that opens sideways. The
		script used to append a ▾ and a ▸ text node; a masked icon keeps
		the shape a real chevron at any size and leaves the menu markup
		alone, which is also what the phone menu is cloned from.
	*/
	ul#nav > li:has(> ul) > a::after,
	ul#nav > li.hasChild > a::after,
	ul#nav li ul li:has(> ul) > a::after,
	ul#nav li ul li.hasChild > a::after {
		content: "";
		flex: none;
		width: 16px;
		height: 16px;
		background-color: currentColor;
		mask-image: var(--icon-chevron-down);
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: contain;
	}

	ul#nav li ul li:has(> ul) > a::after,
	ul#nav li ul li.hasChild > a::after { mask-image: var(--icon-chevron-right); }

	/* Third level opens sideways, flipping in before it leaves the viewport. */
	ul#nav > li ul ul {
		top: 0;
		left: 100%;
	}

	ul#nav > li:last-child ul ul,
	ul#nav > li:nth-last-child(2) ul ul {
		left: auto;
		right: 100%;
	}


	/* Mobile Menu */
	#menu-mobile-wrapper { display: none; }

	@media screen and (max-width: 767px) {
		#menu-mobile-wrapper { display: block; }
	}

	/*
		A real <button>, so it is reachable by keyboard and announced with
		its expanded state. The icon is drawn in CSS rather than loaded from
		menu_open.png / menu_closed.png, which were flat black bitmaps and
		vanished against a dark background.
	*/
	#menu-mobile-wrapper #toggle-menu {
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		padding: 20px 0;
		color: var(--color-text);
		background: none;
		border: 0;
		border-bottom: 1px solid var(--color-rule);
		border-radius: 0;
		font-size: 15px;
		line-height: 25px;
		font-weight: 600;
		text-align: left;
		cursor: pointer;
	}

		#toggle-menu .toggle-icon {
			position: relative;
			flex: none;
			width: 18px;
			height: 2px;
			background: currentColor;
			transition: background var(--transition-fast);
		}

		#toggle-menu .toggle-icon::before,
		#toggle-menu .toggle-icon::after {
			content: "";
			position: absolute;
			left: 0;
			width: 18px;
			height: 2px;
			background: currentColor;
			transition: transform var(--transition-base);
		}

		#toggle-menu .toggle-icon::before { top: -6px; }
		#toggle-menu .toggle-icon::after { top: 6px; }

		/* Bars fold into an X while the menu is open. */
		#toggle-menu[aria-expanded="true"] .toggle-icon { background: transparent; }
		#toggle-menu[aria-expanded="true"] .toggle-icon::before { transform: translateY(6px) rotate(45deg); }
		#toggle-menu[aria-expanded="true"] .toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

	#menu-mobile-wrapper ul#menu-mobile {
		display: none;
		margin-bottom: 15px;
	}

	#menu-mobile-wrapper ul#menu-mobile.is-open { display: block; }

		#menu-mobile-wrapper ul#menu-mobile li {
			font-size: 14px;
			line-height: 21px;
			display: block;
		}

			#menu-mobile-wrapper ul#menu-mobile li a {
				color: var(--color-text-muted);
				display: block;
				/* At least 44px tall, the minimum comfortable touch target. */
				min-height: 44px;
				padding: 12px 0;
				border-bottom: 1px solid var(--color-rule);
			}

			#menu-mobile-wrapper ul#menu-mobile li a:hover { color: var(--color-accent-text); }

			/* Nested items are indented instead of relying on an arrow glyph. */
			#menu-mobile-wrapper ul#menu-mobile li ul li a { padding-left: 20px; }
			#menu-mobile-wrapper ul#menu-mobile li ul ul li a { padding-left: 40px; }


	/*---------------------------------------------------
			3.2 Header
	---------------------------------------------------*/
	
	#header .logo-wrap { padding: 50px 0 50px 0; }

	/*
		The wordmark. It used to be a 764px PNG, which meant a request, a
		fetchpriority hint, and an invert filter to keep it visible in dark
		mode. As text it is sharp at any size and takes its colour from the
		theme like everything else.

		Sized in cqw against its own column, so it fills the header the way
		the bitmap did at every width instead of stepping at breakpoints.
	*/
	#header h1.site-title {
		container-type: inline-size;
		font-weight: 800;
	}

		/*
			25cqw fits a five-letter name plus the ring with a little air to
			spare. A longer or wider name needs a smaller value; a shorter
			one can go larger.
		*/
		#header h1.site-title a {
			display: inline-flex;
			align-items: flex-start;
			color: var(--color-text);
			font-size: 25cqw;
			line-height: 0.82;
			letter-spacing: var(--tracking-wordmark);
			text-transform: uppercase;
		}

			/* The ring the original artwork set over the last letter. */
			#header h1.site-title .wordmark-ring {
				flex: none;
				width: 0.21em;
				height: 0.21em;
				margin-top: 0.04em;
				margin-left: 0.05em;
				border: 0.042em solid currentColor;
				border-radius: 50%;
			}

	#header p.site-desc {
		color: var(--color-text-subtle);
		font-size: 14px;
		line-height: 19px;
	}


	/*---------------------------------------------------
			3.3 Home
	---------------------------------------------------*/
	
	/* Recent Posts */
	.box-recent h3 {
		font-size: 16px;
		line-height: 26px;
		padding: 30px 0 20px 0;
	}

		.box-recent h3 a { color: var(--color-text-subtle); }

	.box-recent a.permalink {
		display: block;
		border-top: 1px solid var(--color-rule);
	}

		.box-recent a.permalink h4 {
			color: var(--color-text-muted); 
			font-size: 22px;
			line-height: 36px;
			font-weight: normal;
			margin-bottom: 5px;
		}

			.box-recent a.permalink:hover h4 {
				color: var(--color-accent-text); 
			}

		.box-recent a.permalink p.meta { color: var(--color-accent-text); }

			.box-recent a.permalink p.meta span { color: var(--color-text-subtle); }

	.box-recent a.permalink:hover {
		color: var(--color-accent-text);
		border-top: 1px solid var(--color-accent);
	}

		.box-recent a.permalink:hover p.meta span { color: var(--color-accent-text); }
	
	.box-recent .item { padding: 20px 0; }
	
	@media screen and (max-width: 767px) { 
		.box-recent a.permalink h4 {
			font-size: 16px;
			line-height: 26px;
		}
	}
	


	/* About box */
	.box-about { 
		margin-top: 30px; 
	}

		.box-about h3 { margin-bottom: 50px; }

		.box-about p.tagline {
			font-size: 24px;
			letter-spacing: var(--tracking-display);
			line-height: 44px;
			font-weight: 300; 
			margin-top: 30px;
			margin-bottom: 30px;
		}

	@media screen and (max-width: 767px) { 
		.box-about p.tagline {
			font-size: 20px;
			line-height: 36px;
		}
	}


	/* What we do (home page with slider) */
	.box-services { padding: 30px 0 20px 0; }

		.box-services h3 {
			font-size: 16px;
			line-height: 26px;
			display: inline-block;
			padding-bottom: 5px;
			border-bottom: 1px solid var(--color-text);
		}

		.box-services p {
			font-size: 15px;
			line-height: 26px;
			margin-top: 15px;
		}

	@media screen and (max-width: 767px) {
		.box-services { padding-bottom: 0; }
		.box-services h3 { margin-top: 10px; }
	}


	/*---------------------------------------------------
			3.4 About
	---------------------------------------------------*/

	#about h2 { padding-top: 30px; }

	/* Three studio facts under the introduction. */
	#about .facts {
		display: flex;
		flex-wrap: wrap;
		gap: 20px 40px;
		margin-bottom: 30px;
		padding-top: 30px;
		border-top: 1px solid var(--color-rule);
	}

		#about .facts li { flex: 1 1 140px; }

		#about .facts .value {
			display: block;
			font-size: 34px;
			line-height: 44px;
			font-weight: 300;
			letter-spacing: var(--tracking-display);
		}

		#about .facts .label {
			display: block;
			color: var(--color-text-subtle);
			font-size: 14px;
			line-height: 22px;
		}

	#about .services .item { padding: 30px 0; }

	#about .services h3 {
		font-size: 16px;
		line-height: 26px;
		display: inline-block;
		padding-bottom: 5px;
		border-bottom: 1px solid var(--color-text);
	}

	#about .services p {
		font-size: 15px;
		line-height: 28px;
		margin-top: 20px;
	}

	@media screen and (max-width: 767px) {
		#about .services h3 { margin-top: 40px; }

		#about .services p {
			font-size: 14px;
			line-height: 24px;
		}
	}

	/*
		People

		The portraits are pencil drawings, and a drawing cannot be inverted
		for dark mode the way the line art is: a negative of a face is not a
		face. Each one sits on a light disc instead, which stays light in
		both themes.
	*/
	#about .people { padding-bottom: 20px; }

	#about .person { padding: 30px 0 10px 0; }

		#about .person .portrait {
			overflow: hidden;
			aspect-ratio: 1;
			border-radius: 50%;
			background: var(--color-plate);
		}

			#about .person .portrait img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

		#about .person h3 {
			font-size: 15px;
			line-height: 24px;
			margin-top: 20px;
		}

		#about .person .role {
			display: block;
			color: var(--color-text-subtle);
			font-size: 14px;
			line-height: 22px;
		}

	/* Closing call to action */
	#about .cta { padding: 30px 0 20px 0; }

		#about .cta p {
			margin: 0 0 30px 0;
			font-size: 16px;
			line-height: 30px;
		}


	/*---------------------------------------------------
			3.5 Works
	---------------------------------------------------*/
	
	#works .item { margin-bottom: 40px; }

		#works .item h3 {
			color: var(--color-text-muted);
			font-size: 14px;
			line-height: 22px;
			font-weight: 600;
		}

		#works a.permalink:hover h3 { color: var(--color-text); }

		/* When the photo comes first, give the title room to breathe. */
		#works .item picture + h3 { margin-top: 16px; }

	#works .item span.category {
		color: var(--color-text-subtle);
		display: block;
		font-size: 14px;
		line-height: 18px;
		margin-bottom: 10px;
	}

		#works a.permalink:hover span.category { color: var(--color-accent-text); }

	#works .item p.excerpt {
		font-size: 14px;
		line-height: 18px;
		margin-top: 10px;
	}

	/* Stackgrid */
	#works.stackgrid .item {
		width: 25%;
		float: left;
		margin-bottom: 0;
		position: relative;
	}

		#works.stackgrid .item img {
			width: 100%; 
		}

	@media screen and (min-width: 1600px) { 
		#works.stackgrid .item { width: 20%; }
	}

	@media screen and (min-width: 960px) and (max-width: 1599px) { 
		#works.stackgrid .item { width: 25%; }
	}

	@media screen and (min-width: 768px) and (max-width: 959px) { 
		#works.stackgrid .item { width: 33.333333%; }
	}

	@media screen and (min-width: 480px) and (max-width: 767px) { 
		#works.stackgrid .item { width: 50%; }
	}

	@media screen and (max-width: 479px) { 
		#works.stackgrid .item { width: 100%; }
	}

	#works.stackgrid .item .box-desc {
		padding: 15px 30px;
		text-align: center;
	}

	#works.stackgrid.images-only {
		/* Navigation */
		margin-top: 0;
	}

		/*
			The overlay used to be revealed by a jQuery fadeIn/fadeOut pair
			and tinted with a 60%-alpha PNG. CSS handles both, and adding
			:focus-within means the caption also appears for keyboard users,
			who previously never saw it.
		*/
		#works.stackgrid.images-only .item .box-desc {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			text-align: left;
			padding: 25px 30px;
			background: rgb(0 0 0 / 0.6);
			opacity: 0;
			transition: opacity var(--transition-base);
		}

		#works.stackgrid.images-only .item:hover .box-desc,
		#works.stackgrid.images-only .item:focus-within .box-desc { opacity: 1; }

			#works.stackgrid.images-only .item .box-desc h3 { color: #fff; }
			#works.stackgrid.images-only .item .box-desc span.category { color: #d8d8d8; }

		#works.stackgrid.images-only .nav-pages { margin-top: 0; }

			#works.stackgrid.images-only .nav-pages a.link-prev,
			#works.stackgrid.images-only .nav-pages a.link-next { border-top: none; }

		#works.stackgrid.images-only a.link-prev,
		#works.stackgrid.images-only a.link-next { border-top: none; }

			#works.stackgrid .item .box-desc span.category {
				margin-bottom: 2px;
			}


	
	/* Single */

		#works.single img { 
			margin-bottom: 60px; 
		}

		#works.single .box-info {
			margin-bottom: 40px; 
			font-size: 14px;
			line-height: 25px;
		}
			
			#works.single .box-info p.project-desc {
				color: var(--color-text-subtle); 
				font-weight: 600; 
				margin-top: 0; 
			}

			#works.single .box-info h4 {
				color: var(--color-text-subtle);
				font-size: 13px;
				line-height: 21px;
			}

				#works.single .box-info h4.border-top {
					padding-top: 20px; 
				}

			#works.single .box-info p {
				margin-top: 15px; 
			}

			@media screen and (max-width: 767px) {
				#works.single .box-info p {
					font-size: 14px; 
					line-height: 24px; 
				}
			}


	/*---------------------------------------------------
			3.6 Shop
	---------------------------------------------------*/
	

	/* Shop */
	#shop h2 {
		font-size: 16px; 
		line-height: 26px; 
		margin-bottom: 30px;
	}

		#shop .shop-info p {
			color: var(--color-text); 
			font-size: 14px; 
			line-height: 26px; 
			margin-top: 20px; 
		}

	
	@media screen and (min-width: 960px) {
		#shop .shop-info h2 {
			margin-bottom: 40px; 
		}

		#shop .shop-info p {
			margin-top: 40px; 
		}
	}


	#shop .cart-item {
		font-size: 14px;
		line-height: 22px;
		margin-bottom: 40px; 
	}

	#shop .cart-item .item-info {
		margin-top: 15px; 
	}

		#shop .cart-item .item-name {
			width: 55%;
			float: left; 
		}

			#shop .cart-item .item-name h3 {
				color: var(--color-text-subtle);
				font-weight: 600;
			}

			#shop .cart-item .item-name span.category {
				color: var(--color-text-subtle);
			}

		#shop .cart-item .item-price {
			color: var(--color-text);
			width: 30%;
			float: right;
			text-align: right;
			border-left: 1px solid var(--color-rule);
		}

			#shop .cart-item .item-price span.markdown {
				color: var(--color-text-subtle);
				text-decoration: line-through;
				display: block;
			}

			#shop .cart-item .item-price span.item_price {
				color: var(--color-price);
				display: block;
			}

		#shop .cart-item a:hover .item-name h3 { 
			color: var(--color-text); 
		}

		#shop .cart-item a:hover .item-name span.category { 
			color: var(--color-text-subtle); 
		}

		#shop .cart-item a:hover .item-price { 
			border-color: var(--color-text-subtle);
		}


	@media screen and (max-width: 767px) {

		#shop .cart-item {
			font-size: 14px;
			line-height: 21px;
		}

			#shop .cart-item .item-info {
				margin-top: 10px; 
			}

				#shop .cart-item .item-name {
					width: 100%;
					float: none;
				}

				#shop .cart-item .item-price {
					width: 100%;
					float: none;
					text-align: left;
					border-left: none;
				}
	}

	form#item-selection {
		margin-top: 30px;
		margin-bottom: 10px; 
	}

	h2.item-name {
		position: relative; 
	}

		h2.item-name span.item-price {
			color: var(--color-price);
			float: right; 
		}

	#shop .sidecart {
		padding-bottom: 20px; 
	}

	#shop .sidecart span.simpleCart_quantity {
		font-weight: 600; 
	}

	#shop .sidecart h2 a:hover {
		color: var(--color-accent-text); 
	}
	
	#shop .sidecart h4 {
		color: var(--color-text-subtle); 
	}

		#shop .sidecart h4 a {
			background: url('../images/icons/icon_cart_white.png') no-repeat 20px center;
			display: block;
		}

		#shop .sidecart p.desc {
			color: var(--color-text-subtle); 
			margin-top: 20px; 
		}

	section#cart h3 { padding: 30px 0; }

		section#cart h3 a { color: var(--color-text-muted); }

	section#cart .sidebar p.title-desc { margin-bottom: 20px; }

	#shop p.vertical-divider,
	#cart p.vertical-divider {
		color: var(--color-text-subtle);
		font-size: 16px;
		font-style: italic;
		font-weight: 600;
		text-align: center;
		padding: 15px 0;
	}


	
	/*
		Cart and checkout

		Styling for a cart page and a checkout form. The template does not ship
		either page; these are here so the ones you build match the rest. Delete
		this block and the #checkout block below if you do not need them.
	*/

	.cart-header {
		font-weight: 600; 
	}

		.cart-header > div {
			padding: 20px 0; 
			border-top: 1px solid var(--color-rule); 
			border-bottom: 1px solid var(--color-rule);
		}

	.product-item {
		margin-top: 20px; 
	}

		.product-item:after {
			content: "."; 
			visibility: hidden; 
			display: block; 
			height: 0; 
			clear: both;
		}

	/* Cart - for a width of 660px */
	.product-thumbnail,
	.product-name,
	.product-price,
	.product-quantity,
	.product-subtotal,
	.product-remove {
		float: left; 
	}

	.product-thumbnail {
		width: 100px; 
	}

	.product-name {
		width: 200px; 
		margin-left: 20px; 
	}

	.product-price {
		width: 80px; 
		margin-left: 20px; 
	}

	.product-quantity {
		width: 60px; 
		margin-left: 20px; 
	}

	.product-subtotal {
		width: 80px; 
		margin-left: 20px; 
	}

	.product-remove {
		width: 60px;
		margin-left: 20px; 
	}


	@media screen and (min-width: 1300px) {
		.product-name {
			width: 260px; 
		}

		.product-price {
			width: 100px; 
		}

		.product-quantity {
			width: 100px; 
		}

		.product-subtotal {
			width: 100px; 
		}

		.product-remove {
			width: 100px;
		}
	}


	#checkout label {
		display: block;
		color: var(--color-text);
		font-size: 14px;
		line-height: 23px;
		margin: 10px 0 6px 0;
	}

	#checkout input[type=text],
	#checkout input[type=url],
	#checkout input[type=tel],
	#checkout input[type=number],
	#checkout input[type=color],
	#checkout input[type=email], 
	#checkout input[type=password], 
	#checkout textarea,
	#checkout select {
		width: 100%;
		color: var(--color-text);
		background: var(--color-bg-sunken); 
		padding: 20px 25px;
		margin: 0 0 12px 0;
		border: 1px solid var(--color-rule-strong);
		outline: none;
		box-sizing: border-box;
	}

		#checkout input[type=text]:focus,
		#checkout input[type=url]:focus,
		#checkout input[type=tel]:focus,
		#checkout input[type=number]:focus,
		#checkout input[type=color]:focus,
		#checkout input[type=email]:focus, 
		#checkout input[type=password]:focus, 
		#checkout textarea:focus,
		#checkout select:focus {
			color: var(--color-accent-text);
			background: var(--color-bg); 
			border: 1px solid var(--color-accent);
		}


	/* Placeholder */
	#checkout ::placeholder {
		color: var(--color-text-subtle);
		opacity: 1;
	}


	/* Input - submit */
	#checkout input[type=submit] {
		border: none; 
	}


	/*---------------------------------------------------
			3.7 Archive (Blog)
	---------------------------------------------------*/
	
	#archive .entry { margin-bottom: 80px; }
	#archive .entry .box-content { padding-top: 30px; }
	


	/* Meta */
	#archive .box-meta {
		padding-top: 30px; 
	}

		#archive .box-meta span.category,
		#archive .box-meta span.date {
			color: var(--color-text-subtle);
			font-size: 14px;
			line-height: 22px;
		}
		
		#archive .box-meta span.category {
			color: var(--color-text-muted);
			font-weight: 600;
		}

	

	/* Tags */
	#archive .entry .box-tags {
		margin-top: 30px; 
	}

	#archive .entry h3 {
		font-size: 26px;
		letter-spacing: var(--tracking-display);
		line-height: 40px;
		font-weight: 300; 
		margin-bottom: 28px;
	}

	#archive .entry p {
		color: var(--color-text);
		margin-top: 40px;
		font-size: 16px;
		line-height: 32px;
	}

		#archive .entry a:hover h3 { 
			color: var(--color-accent-text); 
		}

		#archive .entry a:hover p { 
			color: var(--color-text); 
		}


	#archive .entry p.tags {
		font-size: 14px; 
		line-height: 22px; 
		margin-top: 0; 
	}

		#archive .entry p.tags a {
			color: var(--color-text); 
			display: inline-block; 
			padding-bottom: 3px; 
			border-bottom: 1px solid var(--color-text); 
			margin-right: 5px; 
		}

			#archive .entry p.tags a:hover {
				color: var(--color-accent-text); 
				border-bottom: 1px solid var(--color-accent); 
			}

	@media screen and (max-width: 959px) { 
		#archive .entry p {
			font-size: 14px;
			line-height: 25px;
		}

		#archive .entry .box-content { border-top: none; }
	}


	/* BLockquote */
	#archive .entry blockquote {
		margin-bottom: 15px; 
	}

		#archive .entry blockquote p {
			font-size: 36px;
			letter-spacing: var(--tracking-display);
			line-height: 60px;
			font-style: italic; 
			font-weight: 300;
			margin-bottom: 10px;
		}

		#archive .entry blockquote footer { 
			color: var(--color-accent-text);  
			font-size: 14px; 
			line-height: 22px; 
			font-style: italic; 
			display: inline-block; 
			margin-top: 10px; 
			padding-top: 4px; 
			border-top: 1px solid var(--color-accent); 
		}

	@media screen and (max-width: 959px) { 
		#archive .entry blockquote p {
			font-size: 22px;
			line-height: 40px;
		}
	}


	/*---------------------------------------------------
			3.8 Contact
	---------------------------------------------------*/

	

		section#contact p.title-desc { margin-bottom: 40px; }

		section#contact form { margin-bottom: 40px; }

		section#contact #contact-warning {
			color: var(--color-text-invert);
			background: var(--color-danger);
			padding: 20px 25px;
			margin-bottom: 30px;
		}

		section#contact #contact-success {
			color: var(--color-accent-invert);
			background: var(--color-panel);
			padding: 20px 25px;
			margin-bottom: 30px;
		}

		section#contact .box-contact {
			font-size: 14px;
			line-height: 28px;
			background-size: cover;

			/* An email or URL has nowhere to break inside a half-width phone
			   column, so let it wrap anywhere rather than push the page out. */
			overflow-wrap: anywhere;
		}

			section#contact .box-contact h3 {
				color: var(--color-accent-text);
				font-size: 14px;
				line-height: 24px;
				font-weight: normal;
				margin-bottom: 15px;
			}

			section#contact .box-contact p { margin-top: 0; }

		
		@media screen and (max-width: 767px) { 
			section#contact .box-contact {
				font-size: 14px; 
				line-height: 24px; 
				margin-bottom: 30px; 
			}
		}

		@media screen and (max-width: 479px) { 
			section#contact .box-contact {
				font-size: 14px; 
				line-height: 22px; 
			}
		}
		


		/* Map */
		section#contact #map {
			aspect-ratio: 4 / 3;
			max-height: 500px;
			margin-bottom: 15px;
			background: var(--color-bg-sunken);
		}

			section#contact #map iframe {
				width: 100%;
				height: 100%;
			}

		section#contact p.map-link {
			margin: 0 0 30px 0;
			font-size: 14px;
		}

			section#contact p.map-link a {
				color: var(--color-accent-text);
				border-bottom: 1px solid currentColor;
			}

		/* Honeypot: off-screen rather than display:none, which some bots skip. */
		.honeypot {
			position: absolute;
			left: -9999px;
			width: 1px;
			height: 1px;
			overflow: hidden;
		}

		/* Spacing between fields now comes from CSS, not <br> tags. */
		#contactForm label { margin: 24px 0 8px; }
		#contactForm label:first-of-type { margin-top: 0; }
		#contactForm button[type=submit] { margin-top: 24px; }

		#contactForm input:user-invalid,
		#contactForm textarea:user-invalid {
			border-color: var(--color-danger);
		}


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

	#footer {
		font-size: 14px;
		line-height: 24px;
		padding: 30px 0;
	}

		#footer p { margin-top: 30px; }

			#footer p a { color: var(--color-accent-text); }

		#footer ul#social li {
			display: inline-block;
			float: left;
		}

			#footer ul#social li a {
				display: block;
				padding: 30px 40px 30px 0;
			}

		@media screen and (max-width: 767px) { 
			#footer ul#social {
				margin-top: 30px; 
			}
			#footer ul#social li {
				display: block;
				float: none;
			}

				#footer ul#social li a {
					display: block;
					padding: 20px 0; 
					border-top: 1px solid var(--color-rule); 
				}
		}


/*--------------------------------------------------------------------------
	4. Components
--------------------------------------------------------------------------*/

	/*---------------------------------------------------
			4.1 Slider
	---------------------------------------------------*/

	/*
		Replaces iosSlider and FlexSlider, both abandoned jQuery plugins that
		pinned the template to jQuery 1.8. The track is a scroll-snap
		container: swipe, trackpad scroll, arrow keys and the buttons below
		all work, and it still slides if JavaScript never loads.
	*/

	.tf-slider {
		position: relative;
		background: var(--color-stage);

		/*
			Shape of one slide. Set it to match your artwork and the track
			height follows, instead of the five hard-coded pixel heights the
			old slider needed one per breakpoint.
		*/
		--slide-ratio: 1160 / 450;
	}

	/* A wider full-bleed ratio, if your artwork suits it. */
	.tf-slider.is-wide { --slide-ratio: 1600 / 550; }

	@media screen and (max-width: 767px) {
		/* A 2.6:1 letterbox is a sliver on a phone. Crop taller instead. */
		.tf-slider,
		.tf-slider.is-wide { --slide-ratio: 3 / 2; }
	}

	.tf-slider__track {
		display: flex;
		gap: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;

		/* The native scrollbar would sit across the artwork. */
		scrollbar-width: none;
	}

	.tf-slider__track::-webkit-scrollbar { display: none; }

	/*
		The script marks the track draggable once it is running, so the
		grab cursor only appears where a drag will actually do something.
		Snapping is switched off for the length of a drag: mandatory
		snapping fights a scrollLeft written by hand, pixel by pixel.
	*/
	.tf-slider__track.is-draggable { cursor: grab; }

	.tf-slider__track.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		scroll-behavior: auto;
		user-select: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.tf-slider__track { scroll-behavior: auto; }
	}

	.tf-slider__slide {
		flex: 0 0 100%;
		aspect-ratio: var(--slide-ratio);
		scroll-snap-align: center;
		scroll-snap-stop: always;
		margin: 0;
	}

		.tf-slider__slide img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	/*
		Wide variant: neighbouring slides peek in at the edges, the way the
		old iosSlider home page looked. Below tablet each slide takes the
		full width so nothing is cropped on a phone.
	*/
	.tf-slider.is-peeking .tf-slider__slide { flex-basis: 100%; }

	/*
		The slide width and the track padding are both measured against the
		slider itself (cqw), not the track: a percentage would resolve
		against the track's content box, which the padding shrinks.
	*/
	.tf-slider.is-peeking { container-type: inline-size; }

	@media screen and (min-width: 768px) {
		.tf-slider.is-peeking { --peek-slide: min(1160px, 80cqw); }

		.tf-slider.is-peeking .tf-slider__slide { flex-basis: var(--peek-slide); }

		/*
			A centred snap point cannot centre the first or last slide unless
			there is room beside it. Half the leftover width on each side gives
			the ends the same position as every slide in between, so slide one
			sits in the middle at rest instead of against the left edge.
		*/
		.tf-slider.is-peeking .tf-slider__track {
			padding-inline: calc((100cqw - var(--peek-slide)) / 2);
		}
	}


	/* Previous / next */
	.tf-slider__arrow {
		position: absolute;
		top: 50%;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--color-text);
		background: var(--color-bg);
		border: 0;
		border-radius: 50%;
		opacity: 0;
		cursor: pointer;
		transform: translateY(-50%);
		transition: opacity var(--transition-base);
	}

	.tf-slider__arrow[data-slider-prev] { left: 12px; }
	.tf-slider__arrow[data-slider-next] { right: 12px; }

	.tf-slider:hover .tf-slider__arrow,
	.tf-slider:focus-within .tf-slider__arrow { opacity: 0.9; }

	.tf-slider__arrow:hover { opacity: 1; }

	/*
		Keep a disabled arrow hidden at rest. Giving :disabled its own
		opacity outright would out-rank the hidden state and leave the arrow
		showing on a page nobody is pointing at.
	*/
	.tf-slider__arrow:disabled { cursor: default; }

	.tf-slider:hover .tf-slider__arrow:disabled,
	.tf-slider:focus-within .tf-slider__arrow:disabled { opacity: 0.25; }

	@media (hover: none) {
		.tf-slider__arrow:disabled { opacity: 0.25; }
	}

	/* Touch devices have no hover, so the controls stay visible. */
	@media (hover: none) {
		.tf-slider__arrow { opacity: 0.9; }
	}

		.tf-slider__arrow svg {
			width: 18px;
			height: 18px;
			fill: none;
			stroke: currentColor;
			stroke-width: 2;
		}


	/* Dots, used when there is no thumbnail strip */
	.tf-slider__dots {
		display: flex;
		justify-content: center;
		gap: 10px;
		padding: 16px 0;
		background: var(--color-stage);
	}

		.tf-slider__dots button {
			width: 10px;
			height: 10px;
			padding: 0;
			background: var(--color-on-stage);
			border: 0;
			border-radius: 50%;
			opacity: 0.35;
			cursor: pointer;
			transition: opacity var(--transition-fast);
		}

		.tf-slider__dots button[aria-current="true"] {
			background: var(--color-accent);
			opacity: 1;
		}

		.tf-slider__dots button:hover { opacity: 0.8; }


	/*---------------------------------------------------
			4.2 Slider thumbnails
	---------------------------------------------------*/

	/* Thumbnail strip (home page with slider) */
	.slider-thumbs {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		background: var(--color-stage);
	}

	.slider-thumbs::-webkit-scrollbar { display: none; }

		.slider-thumbs button {
			flex: 0 0 25%;
			padding: 0;
			background: none;
			border: 0;
			border-radius: 0;
			opacity: 0.5;
			cursor: pointer;
			transition: opacity var(--transition-fast);
		}

		@media screen and (max-width: 767px) {
			.slider-thumbs button { flex-basis: 33.3333%; }
		}

		.slider-thumbs button:hover { opacity: 0.8; }

		.slider-thumbs button[aria-current="true"] { opacity: 1; }

			.slider-thumbs img {
				width: 100%;
				aspect-ratio: 16 / 6;
				object-fit: cover;
			}


	/*
		Focus ring for the controls that sit flush inside a dark strip.

		The shared ring is drawn 3px outside the element, which here is
		clipped away by the thumbnail strip's own scrolling box. The light-mode ring colour is
		also too dark to read against the panel. So: bright accent, drawn
		inside the control.
	*/
	.slider-thumbs button:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: -2px;
		border-radius: 0;
	}