/**c93ec264ded13099f23f2fdbb674f4f8711dedba**/
/****************************************************************************************************
 *
 *
 *			00 Theme
 *
 *
 *			Design tokens as native CSS custom properties. --color-primary defaults
 *			to the workbench's blue - everything else is a project-neutral placeholder.
 *			A project overrides whatever it needs in its own stylesheet
 *			(assets/theme.css, or the assets/style.css after it), loaded after
 *			this file, via a plain :root { --token: value; } block - no build
 *			step, no load-order juggling, the cascade resolves var() at compute
 *			time.
 *
 *			If a token still needs to stay editable per project, define it
 *			as --token: [[/project/website/color/primary]]; instead of a literal value.
 *
 *			--text-1 .. --text-6 is a small type scale for titles/subtitles,
 *			mirroring the existing --space-1 .. --space-6 numbering. It is
 *			relative to --font-text-size, the size of the text role: that is
 *			the first step, the others are factors of it. Sizes that aren't
 *			part of that heading hierarchy (form fields, badges, one-off
 *			components) are intentionally left as plain literals.
 *
 *			Title, subtitle, text, button and code are the five font roles,
 *			each with a family (--fontfamily-<role>), a weight, a transform
 *			and a size (--font-<role>-weight, -transform and -size). What
 *			reads which is said beside the defaults in :root.
 *
 *			A section, a row, a column and a card paint a ground with the same
 *			words (alt, tint, dark, black, primary, brand-alt, and counter on a
 *			row, a column and a card): --color-ground and --color-ink name the
 *			one a thing sits on, and the roles solved against it follow. That is
 *			said beside the defaults in :root and under Grounds in chapter 04.
 *
 *			--base-size and --text-4/-5/-6 step up at the 768px breakpoint (see
 *			the @media block right below :root) - mobile-first fluid type, not
 *			a fixed size scaled down for small screens. A project overriding
 *			these needs to repeat the same @media step in its own stylesheet,
 *			same as assets/theme.css does. --base-size is a percentage of the
 *			visitor's own browser default rather than a fixed px, so an override
 *			has to stay a percentage too.
 *
 *
 ****************************************************************************************************/

:root {
	/*	Two brand roles, and the difference between them is a promise, not a
		shade. --color-primary is the brand as a surface things sit on:
		everything below that fills with it also puts --color-primary-text on
		top, so it has to be a value text survives. --color-secondary is the
		brand as it was actually chosen - it is only ever shown, never written
		on, which is why nothing here pairs it with an ink.

		A generated design maps them accordingly: --color-secondary to
		--nino-brand, the picked colour untouched, and --color-primary to
		--nino-brand-safe, the same colour with its lightness solved until the
		contrast target is met. Where no design layer is present the two
		collapse, as they do here.	*/
	--color-primary: #4faae8;
	--color-primary-text: #ffffff;
	--color-secondary: var(--color-primary);

	/*	The second brand colour, as a surface. Same promise as --color-primary
		and the same pair of roles - it is filled with and written on - and the
		difference is only which of the two brand colours it carries. A design
		layer maps it to --nino-accent-safe, the second colour with its
		lightness solved; without one it collapses onto the primary, so a theme
		that reaches for it is never reaching for nothing.

		It is not --color-accent. That role is the brand as *ink* on the ground
		it is written on, per ground, and has been since long before there was a
		second brand colour to have. Two roles, two jobs, and the near-miss
		between the names is why this one says which colour it is instead. */
	--color-brand-alt: var(--color-primary);
	--color-brand-alt-text: var(--color-primary-text);
	--color-text: #333333;
	--color-title: var(--color-primary);
	--color-subtitle: var(--color-text);

	/*	The brand as ink, which is not the same value as the brand as a
		surface. Everything that fills with --color-primary puts
		--color-primary-text on top, so that colour is measured against its own
		ink and against nothing else. Written *on* a page surface it carries no
		promise at all - which is what put brand-coloured prices, stat counters,
		outline buttons and info alerts under the text target on every ground
		that is not near-white, and far under it on a dark one.

		--color-accent is that missing role: the brand as ink on the ground it
		is actually on. A generated design solves one per surface
		(--nino-<surface>-link, see the Design feature); a theme without one falls back to
		the ink the surface already carries, which is legible by construction.
		The section classes further down re-point --color-accent and
		--color-title to the ground they paint, so a component never has to know
		which section it was dropped into. Anything that paints the page ground
		again inside such a section (an alert, a modal, the burger overlay)
		restores both from the -default pair.	*/
	--color-accent: var(--color-accent-default);
	--color-accent-default: var(--color-title);
	--color-accent-alt: var(--color-section-alt-text);
	--color-accent-tint: var(--color-section-tint-text);
	--color-accent-dark: var(--color-section-dark-text);
	--color-accent-black: var(--color-section-black-text);
	--color-title-default: var(--color-title);
	--color-background: #ffffff;
	--color-header-bg: #ffffff;
	--color-footer-bg-main: #1c1917;
	--color-footer-text-main: #9ca3af;
	--color-footer-bg-legal: #1c1917;
	--color-footer-text-legal: #666b74;
	--color-border: #dddddd;
	--color-background-dim: rgb(20 33 61 / 78%);
	--color-section-default-bg: #ffffff;
	--color-section-default-text: #222222;
	--color-section-alt-bg: #eeeeee;
	--color-section-alt-text: #111111;
	/*	The fifth ground: the page with the brand in it rather than a near-grey
		step away from it. Quiet enough to carry a whole section of body copy,
		coloured enough to read as chosen - which is the band a brand-tinted
		quiet section is made of, and the one the four neutral grounds could not
		express. Collapses onto the alternate ground without a design layer. */
	--color-section-tint-bg: var(--color-section-alt-bg);
	--color-section-tint-text: var(--color-section-alt-text);
	--color-section-dark-bg: #14213d;
	--color-section-dark-text: #ffffff;
	--color-section-black-bg: #0a0e1a;
	--color-section-black-text: #ffffff;
	--color-code-bg: var(--color-section-black-bg);
	--color-code-text: var(--color-section-black-text);
	--color-code-border: rgb(255 255 255 / 12%);
	--color-error: #f44336;
	--color-success: #4caf50;
	/*	Amber dark enough to carry white, unlike the two above it: those two
		predate the generated layer and a theme is expected to remap them,
		but a role shipping a pair that fails out of the box is not one to
		copy. --nino-warning is what a theme maps this to. */
	--color-warning: #b45309;
	/*	Status surfaces are surfaces: they need their own ink rather than the
		brand's, which is solved against the brand and not against them	*/
	--color-error-text: var(--color-primary-text);
	--color-success-text: var(--color-primary-text);
	--color-warning-text: var(--color-primary-text);

	/*	The focus ring, per ground, for exactly the reason --color-accent is
		per ground: a ring is solved against the surface it sits on, and one
		solved against the page carried onto a dark section is the same
		cross-surface pairing that made --color-primary unreadable there.
		WCAG 2.2 SC 2.4.7 asks for a visible indicator and SC 1.4.11 asks 3:1
		for it - the generated --nino-*-focus values are measured to that. */
	--color-focus: var(--color-focus-default);
	--color-focus-default: var(--color-accent-default);
	--color-focus-alt: var(--color-accent-alt);
	--color-focus-tint: var(--color-accent-tint);
	--color-focus-dark: var(--color-accent-dark);
	--color-focus-black: var(--color-accent-black);

	/*	The ground a thing sits on and the ink on it. :root answers for the
		page; a section, a column and a card that paint a ground of their own
		answer for it (see Grounds in chapter 04), and so does everything that
		puts the page ground back or paints a surface of its own - an alert and a
		toast with their status surfaces, a modal, the overlays - so that a rule
		or a design layer that wants the pair, to mix a hover out of it or to draw
		a hairline on it, reads it from here and not from the section it hopes it
		is in. --logo-light and --logo-dark, the pair of the logo, are set in the
		same places and for the same reason.	*/
	--color-ground: var(--color-section-default-bg);
	--color-ink: var(--color-text);
	--logo-light: var(--color-section-default-logo-light);
	--logo-dark: var(--color-section-default-logo-dark);

	/*	The border of each ground, handed down with the roles above. It is the
		page's border until a design layer gives a ground one of its own - the
		delivered theme.css sets none of them	*/
	--color-border-default: var(--color-border);
	--color-border-alt: var(--color-border);
	--color-border-tint: var(--color-border);
	--color-border-dark: var(--color-border);
	--color-border-black: var(--color-border);
	--color-border-primary: var(--color-border);
	--color-border-brand-alt: var(--color-border);

	/*	The logo, per ground, as the border is: a picture is drawn for one kind
		of ground, and the ground it stands on says which. [logo] draws two, the
		one for a light ground and the one for a dark ground, and shows the one
		that a pair of properties names - --logo-light and --logo-dark, a
		display value each, block or none, one of them each. A ground that paints
		itself sets the pair beside --color-ground and --color-ink, from the
		roles below, and hands it to what stands in it, so that the logo never
		has to know which ground it was dropped onto. The roles are the pair of
		each ground, the page's and the footer's among them: without a design
		layer the page and the grounds that are written on in a dark ink show the
		picture for a light ground, and the grounds that are written on in a
		light ink - dark, black, the two brand grounds and the three statuses -
		the one for a dark ground. A design layer solves them from the ink of each
		surface (--nino-<surface>-logo-light and -logo-dark, see the Design
		feature), so that the page flips with the colour scheme and a brand
		ground with the colour it was given	*/
	--color-logo-light: block;
	--color-logo-dark: none;
	--color-section-default-logo-light: block;
	--color-section-default-logo-dark: none;
	--color-section-alt-logo-light: block;
	--color-section-alt-logo-dark: none;
	--color-section-tint-logo-light: var(--color-section-alt-logo-light);
	--color-section-tint-logo-dark: var(--color-section-alt-logo-dark);
	--color-section-dark-logo-light: none;
	--color-section-dark-logo-dark: block;
	--color-section-black-logo-light: none;
	--color-section-black-logo-dark: block;
	--color-primary-logo-light: none;
	--color-primary-logo-dark: block;
	--color-brand-alt-logo-light: var(--color-primary-logo-light);
	--color-brand-alt-logo-dark: var(--color-primary-logo-dark);
	--color-error-logo-light: var(--color-primary-logo-light);
	--color-error-logo-dark: var(--color-primary-logo-dark);
	--color-success-logo-light: var(--color-primary-logo-light);
	--color-success-logo-dark: var(--color-primary-logo-dark);
	--color-warning-logo-light: var(--color-primary-logo-light);
	--color-warning-logo-dark: var(--color-primary-logo-dark);
	--color-footer-logo-light: none;
	--color-footer-logo-dark: block;

	/*	What a row, a column and a card become on the counter ground, in three
		families of properties, one for each part of a ground (bg, text, title,
		accent, focus, border, logo-light, logo-dark). The framework alone sets
		them; a theme never writes one:
			--counter-grid-*        what a .nino-grid--counter and a
			                        .nino-grid-row--counter become
			--counter-grid-next-*   what a .nino-card--counter in a
			                        .nino-grid--counter becomes
			--counter-card-*        what a .nino-card--counter becomes
		These are the page's, whose ground is default: a row or a column stands
		out of it as alt and a card in that column as default again, a card
		straight on the page as alt. A section and a row with a ground answer
		for their own ground, a column with a ground for the cards in it -
		Grounds in chapter 04 has the rules and the pairs.	*/
	--counter-grid-bg: var(--color-section-alt-bg);
	--counter-grid-text: var(--color-section-alt-text);
	--counter-grid-title: var(--color-section-alt-text);
	--counter-grid-accent: var(--color-accent-alt);
	--counter-grid-focus: var(--color-focus-alt);
	--counter-grid-border: var(--color-border-alt);
	--counter-grid-logo-light: var(--color-section-alt-logo-light);
	--counter-grid-logo-dark: var(--color-section-alt-logo-dark);
	--counter-grid-next-bg: var(--color-section-default-bg);
	--counter-grid-next-text: var(--color-section-default-text);
	--counter-grid-next-title: var(--color-title-default);
	--counter-grid-next-accent: var(--color-accent-default);
	--counter-grid-next-focus: var(--color-focus-default);
	--counter-grid-next-border: var(--color-border-default);
	--counter-grid-next-logo-light: var(--color-section-default-logo-light);
	--counter-grid-next-logo-dark: var(--color-section-default-logo-dark);
	--counter-card-bg: var(--color-section-alt-bg);
	--counter-card-text: var(--color-section-alt-text);
	--counter-card-title: var(--color-section-alt-text);
	--counter-card-accent: var(--color-accent-alt);
	--counter-card-focus: var(--color-focus-alt);
	--counter-card-border: var(--color-border-alt);
	--counter-card-logo-light: var(--color-section-alt-logo-light);
	--counter-card-logo-dark: var(--color-section-alt-logo-dark);

	/*	Deliberately under the text target: the one state that must not look
		actionable. --nino-*-disabled is solved to 2.2:1 - identifiable, and
		clearly not offered. */
	--color-disabled: var(--color-subtitle);

	/*	A font stack is a comma separated list of family names, and quoting one
		is how a single name that needs it - 'Segoe UI' - is spelled. Quoting
		the whole list instead spells one family literally called
		`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,
		which no system has: the browser finds nothing, never reaches the
		generic keyword at the end because that keyword is inside the string
		too, and falls back to its own standard font. theme.css quotes the
		webface it ships and leaves the fallbacks bare, which is the shape.	*/
	--fontfamily-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--fontfamily-title: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--fontfamily-subtitle: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--fontfamily-button: var(--fontfamily-text);
	--fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	/*	The rest of the five font roles - a weight, a transform and a size each;
		with the family above that is everything a rule in this file reads of a
		role. The title role is read by .nino-section-title,
		.nino-card-title and .nino-hero-title, and its weight and transform
		by every h1 to h6 as well: a heading without a class keeps the face of
		the text and the size the browser gives it. The subtitle role is read
		by the three subtitles, the text role by the page (size, weight and
		transform), the button role by .nino-btn and the code role by
		.nino-code.

		Each default is the look of the framework: titles and buttons are bold,
		the rest normal, nothing is transformed, a title is the --text-5 step of
		the scale below and a subtitle the --text-3, a button is as large as
		--fontsize-btn says and the code block is .875rem. The title, the
		subtitle and the button are larger than the rules were before there
		were roles - they stood on --text-4, --text-2 and 1rem - and a design
		layer that wants those sizes says so.

		The text size is the root of that scale, and the page reads it on body.
		A size in rem there takes away the smaller size the browser gives a
		code, kbd, samp or pre - 13px beside text of 16px - so the reset states
		it again for those four.	*/
	--font-title-weight: bold;
	--font-title-transform: none;
	--font-title-size: var(--text-5);
	--font-subtitle-weight: normal;
	--font-subtitle-transform: none;
	--font-subtitle-size: var(--text-3);
	--font-text-weight: normal;
	--font-text-transform: none;
	--font-text-size: 1rem;
	--font-button-weight: bold;
	--font-button-transform: none;
	--font-button-size: var(--fontsize-btn);
	--font-code-weight: normal;
	--font-code-transform: none;
	--font-code-size: .875rem;

	/*	Relative, not 16px: a font-size on html resolves against the browser's
		own default, so 100% is whatever the visitor set it to. A length here
		would silently overrule someone who raised their default to 20px, which
		is the one setting a visitor changes precisely because they need it.
		112.5% below is 18px for a default of 16, and 22.5px for a default of
		20 - the step stays proportional either way. Anything deriving a length
		from this has to go through --text-* / --space-*, never through
		calc() on this value: a percentage is not a length.	*/
	--base-size: 100%;
	--line-height: 1.5;
	--fontsize-small: .75em;
	--fontsize-big: 1.25em;
	--fontsize-btn: 1.1rem;

	/*	The scale is relative to the text size, with the factors its rem values
		were. --text-4 to --text-6 have factors of their own from 768px (see
		below)	*/
	--text-1: var(--font-text-size);
	--text-2: calc(var(--font-text-size) * 1.125);
	--text-3: calc(var(--font-text-size) * 1.25);
	--text-4: calc(var(--font-text-size) * 1.5);
	--text-5: calc(var(--font-text-size) * 1.8);
	--text-6: calc(var(--font-text-size) * 2.5);

	/*	What a design layer scales without choosing a size. The hero takes the
		size of the title and of the subtitle role times --scale-loud and has no
		number of its own: it is the loud variant of a section's title and
		subtitle, and a design layer that moves --scale-loud moves the hero with
		it. A card title takes the size of the title role times a number of its
		own, 5 / 6, because it stood on --text-3 where the title role stood on
		--text-4, and keeps that ratio to it; it is another number from 768px,
		where the scale above steps up (see below). A section title, a section
		subtitle and a card subtitle have a number of their own too, 1 at every
		width, and a section title has a rule under it, none until a design layer
		gives it a thickness:
			--section-title-scale     times the title role: a section title
			--section-subtitle-scale  times the subtitle role: a section subtitle
			--card-subtitle-scale     times the subtitle role: a card subtitle
			--section-line            the thickness of the rule under a section title
		The --quiet and --loud variants of a section, a card and a hero are
		the size of the class they vary - the role times its number, where the
		class has one - times --scale-quiet or --scale-loud: a title that is
		made larger has a quiet and a loud variant that follow it.	*/
	--card-title-scale: calc(5 / 6);
	--section-title-scale: 1;
	--section-subtitle-scale: 1;
	--card-subtitle-scale: 1;
	--section-line: 0px;
	--scale-quiet: .85;
	--scale-loud: 1.2;

	--space-1: .5rem;
	--space-2: 1rem;
	--space-3: 2rem;
	--space-4: 3rem;
	--space-5: 5rem;
	--space-6: 8rem;

	/*	How much air a layout has, from one number. --whitespace-scale is 1, and
		1 is the layout of every page that never heard of it, to the pixel: .75
		takes a quarter of the air away, 2 doubles it. Three strengths come of
		it, each exactly 1 where the number is 1:
			--whitespace-scale  the areas, whole: the padding of a section, the
			                    margin and the padding of a card and of what is in
			                    it, the gap between the columns of a row of cards,
			                    the padding of a tile
			--whitespace-gap    the room between pieces: the gap of a stack, of its
			                    cells and of a column that is a stack - the number
			                    moved .8 of the way
			--whitespace-text   the room under text: a title, a subtitle, a text,
			                    the paragraphs and lists of a rich text, a legal
			                    section and the picture of a card - the number
			                    moved .6 of the way
		The two derived ones are damped on purpose: at 2 a paragraph gap of 1rem
		that becomes 2rem reads as holes in the text, while 10rem of section
		padding instead of 5rem is exactly the air a loud design wants. What the
		number never touches: the --space-* scale itself, the width of the page
		(--grid-gutter and the padding of a row are the width ladder's of the
		Design feature), line heights, buttons and controls, the rule under a
		section title and the utility classes (nino-p-<n>, nino-mt-<n> ...), which
		say what they say. A template or a page may set --whitespace-scale on a
		section or on a card to tune that subtree: the two derived strengths are
		said again for both, below, because a property that is worked out from
		another is worked out where it is declared.	*/
	--whitespace-scale: 1;
	--whitespace-gap: calc( 1 + ( var(--whitespace-scale) - 1 ) * .8 );
	--whitespace-text: calc( 1 + ( var(--whitespace-scale) - 1 ) * .6 );

	--card-img-max-width: 12vw;
	--card-img-max-height: 20vh;
	--grid-max-width: 120rem;
	/*	The space between the viewport and a row - the row's own padding, which
		is one step wider from 768px (see below)	*/
	--grid-gutter: var(--space-2);
	/*	A section of tiles (.nino-tiles, chapter 04): its columns are tiles, and a
		tile is a surface of its own. The room inside a tile is one step wider from
		768px, both times --whitespace-scale; the gap between the tiles is what the
		row names none of, the grout the section's ground shows in; --tiles-place is
		where the words of a tile stand in it - start, center or end - and the three
		scales are times the roles, the title, the subtitle and the words of a tile.
		The corners of a tile are a kind of surface, --radius-tile, below	*/
	--tiles-padding: var(--space-3);
	--tiles-gap: 0px;
	--tiles-place: center;
	--tiles-title-scale: 1;
	--tiles-subtitle-scale: 1;
	--tiles-text-scale: 1;
	--radius: .2rem;
	--radius-small: .1rem;
	/*	The third step the scale always implied and never named: .1 / .2 / .4
		is exactly what the Design feature's raster publishes as --nino-radius-1 to -3,
		so the framework's own radii and the generated ones are one ladder */
	--radius-large: .4rem;
	/*	The radius of a surface is the page's, not a template's: two strengths for
		the whole page - --radius-surface, the standard, and --radius-surface-alt,
		the alternative - and six kinds of surface, each with a token that points
		at one of the two and a marker, --radius-<kind>-default, that says which as
		a plain word, standard or alternative. The marker draws nothing: it is for a
		tool that wants the default of a kind without resolving a length, and reads
		it from the computed style of the root. The kinds:
			--radius-cover   the picture of a padded cover, the box of a parallax and
			                 the scrim of a dimmed cover
			--radius-row     a row that paints a ground or holds a picture
			--radius-column  a column that paints a ground or holds a picture
			--radius-tile    a tile, a column of a section of tiles: its ground and its
			                 picture
			--radius-card    a card, and the picture in it at .7 of its corner
			--radius-image   the frame of the image component
		One element takes the other strength with a class of its own, nino-radius or
		nino-radius-alt, which come after the whitespace classes below. A design
		layer says the two strengths and the default of each kind for the page - the
		Design feature writes them - and what stands here is the framework's own:
		every kind standard, the standard the small radius and the alternative the
		large one. A button, a field, a badge, an alert and the rest keep --radius,
		--radius-small and --radius-large	*/
	--radius-surface: var(--radius-small);
	--radius-surface-alt: var(--radius-large);
	--radius-cover: var(--radius-surface);
	--radius-cover-default: standard;
	--radius-row: var(--radius-surface);
	--radius-row-default: standard;
	--radius-column: var(--radius-surface);
	--radius-column-default: standard;
	--radius-tile: var(--radius-surface);
	--radius-tile-default: standard;
	--radius-card: var(--radius-surface);
	--radius-card-default: standard;
	--radius-image: var(--radius-surface);
	--radius-image-default: standard;
	/*	The shadow of a card: .nino-card and .nino-pricing-item read it, and
		it is none until a design layer gives a card one. A borderless card
		has none, and the middle card of .nino-pricing-row--feature-middle and
		the toast keep the shadows they have	*/
	--shadow-card: none;
}
@media (min-width: 768px){
  :root{
		--base-size: 112.5%;
    --text-4: calc(var(--font-text-size) * 1.6);
    --text-5: calc(var(--font-text-size) * 2);
    --text-6: calc(var(--font-text-size) * 3);
		--card-title-scale: calc(25 / 32);
		--grid-gutter: var(--space-3);
		--tiles-padding: var(--space-4);
  }
}

/*	A section or a card that sets --whitespace-scale of its own: what stands in
	it takes its number, not the page's. A custom property that is worked out
	from another is worked out where it is declared and inherited as the value
	it came to, so the two strengths of :root would stay the page's - and the
	same goes for any element a whitespace class is written on (below)	*/
.nino-section, .nino-card,
.nino-whitespace--least, .nino-whitespace--less, .nino-whitespace--more, .nino-whitespace--most {
	--whitespace-gap: calc( 1 + ( var(--whitespace-scale) - 1 ) * .8 );
	--whitespace-text: calc( 1 + ( var(--whitespace-scale) - 1 ) * .6 );
}
/*	The four positions of the whitespace around the middle, as classes: the
	number of the page is the middle one, and these are the two steps below and
	above it - the four outer values of the ladder the Design feature gives its
	whitespace position (Setup::WHITESPACE), which these mirror. On a section or
	a card, or on any element whose content is to have more or less air than the
	page: it sets the number and everything that reads it, the strengths above
	included, follows	*/
.nino-whitespace--least { --whitespace-scale: .75; }
.nino-whitespace--less { --whitespace-scale: .9; }
.nino-whitespace--more { --whitespace-scale: 1.5; }
.nino-whitespace--most { --whitespace-scale: 2; }

/*	The radius of one element, as two classes: nino-radius takes the standard
	strength and nino-radius-alt the alternative, written on the element where it
	deviates from the default of its kind. There is a rule for each kind and each
	class, and each names the element of its kind and sets the token of that kind
	alone, so that a class on a column says --radius-column and nothing a card in
	it reads, and the card keeps its own. The rule of the surface reads the token
	(the padded cover, the row, the column, the card and the frame of the image
	component, below), so the parts inside a surface - the picture of a card, the
	scrim of a cover - follow the class as they follow the default, and so does
	a surface of the same kind inside it, as a custom property is inherited. A
	column is one that paints a ground or holds a picture; a tile is a column of
	a section of tiles	*/
.nino-cover--padded.nino-radius { --radius-cover: var(--radius-surface); }
.nino-cover--padded.nino-radius-alt { --radius-cover: var(--radius-surface-alt); }
.nino-grid-row.nino-radius { --radius-row: var(--radius-surface); }
.nino-grid-row.nino-radius-alt { --radius-row: var(--radius-surface-alt); }
:is(.nino-grid--alt, .nino-grid--tint, .nino-grid--dark, .nino-grid--black, .nino-grid--primary, .nino-grid--brand-alt, .nino-grid--counter, .nino-grid--dim, :has(> .nino-grid-bg)).nino-radius { --radius-column: var(--radius-surface); }
:is(.nino-grid--alt, .nino-grid--tint, .nino-grid--dark, .nino-grid--black, .nino-grid--primary, .nino-grid--brand-alt, .nino-grid--counter, .nino-grid--dim, :has(> .nino-grid-bg)).nino-radius-alt { --radius-column: var(--radius-surface-alt); }
:is(.nino-tiles > .nino-grid-row > *).nino-radius { --radius-tile: var(--radius-surface); }
:is(.nino-tiles > .nino-grid-row > *).nino-radius-alt { --radius-tile: var(--radius-surface-alt); }
.nino-card.nino-radius { --radius-card: var(--radius-surface); }
.nino-card.nino-radius-alt { --radius-card: var(--radius-surface-alt); }
.nino-image.nino-radius { --radius-image: var(--radius-surface); }
.nino-image.nino-radius-alt { --radius-image: var(--radius-surface-alt); }


/****************************************************************************************************
 *
 *
 *			01 - Reset
 *
 *
 *			A full cross-browser reset
 *
 *
 ****************************************************************************************************/

html {
	font-family: var(--fontfamily-text);
	box-sizing: border-box;
	font-size: var(--base-size);
	line-height: var(--line-height);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

/* Column flow so a short page still puts the footer on the bottom edge.
   min-height alone only stretched the body - the footer stayed wherever the
   content ended, which on a page-blank.tpl route (the starting point
   the wizard writes for every Blank page) left it floating mid-viewport above
   a screen-high strip of empty background. `header` is position:fixed and so
   out of flow either way; .nino-preloader is fixed too,
   which leaves `main` and `footer` as the only flex items here */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	line-height: inherit;
	font-size: var(--font-text-size);
	font-weight: var(--font-text-weight);
	text-transform: var(--font-text-transform);
	color: var(--color-text);
	background-color: var(--color-background);
	width: 100%;
	overflow-x: visible;
}

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

img {
	max-width: 100%;
	height: auto;
	display: block;
	border-style: none;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

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

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

fieldset {
	padding: var(--space-3) 0;
}

legend {
	box-sizing: border-box;
	color: var(--color-text);
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
	color: var(--color-primary);
}

textarea {
	overflow: auto;
}

/*	Preformatted text is the one element that cannot reflow, so it scrolls in
	its own box instead of pushing the page wide (.nino-code adds the skin) */
pre {
	max-width: 100%;
	overflow: auto;
}

/*	The browser sets a code, kbd, samp or pre smaller than the text around it -
	13px beside 16px, from 768px 14.625px beside 18px - but only while nothing
	above it has a size in rem, and the page reads one on body. So the ratio is
	stated, once, for one that stands in none of the four: the one inside it
	has the size of the first, as it had, and a class with a size of its own
	(.nino-code) wins by its specificity	*/
:is(code, kbd, samp, pre):not(:is(code, kbd, samp, pre) *) {
	font-size: .8125em;
}
/*	The rule above gives every code that size, also inside an element that
	states its size in rem - and there the browser never did: its quirk applies
	only where the size around the code comes from a chain of keywords, and a
	length ends the chain, so a code in such an element had the size of that
	element. The kernel's sized classes for text, titles, prices, counts and
	labels are such elements - the text and the description, the titles and the
	subtitles of a section, a card and a hero, and the title and the price
	of the pricing table, each with its --quiet and --loud, the price of a
	card, the stat counter, the message of a form, the button and the filter
	button - so a code in one of them says 1em, and is not made 13px beside 16,
	19.5px beside 24 or 11.4px beside 14. :where() adds no specificity: the
	rule is as specific as the one above and wins by coming after it, and a
	class with a size of its own (.nino-code) wins over both	*/
:where(
	.nino-section-text, .nino-section-text--quiet, .nino-section-text--loud,
	.nino-card-descr, .nino-card-descr--quiet, .nino-card-descr--loud,
	.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud,
	.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud,
	.nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud,
	.nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud,
	.nino-card-subtitle, .nino-card-subtitle--quiet, .nino-card-subtitle--loud,
	.nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud,
	.nino-pricing-title, .nino-pricing-title--quiet, .nino-pricing-title--loud,
	.nino-pricing-price, .nino-pricing-price--quiet, .nino-pricing-price--loud,
	.nino-card-price, .nino-stat-counter, .nino-form-message,
	.nino-btn, .nino-filter-btn
) :is(code, kbd, samp, pre):not(:is(code, kbd, samp, pre) *) {
	font-size: 1em;
}

li {
	list-style-type: none;
}

p {
	padding: 0;
	line-height: var(--line-height);
}

/*	A heading takes two things of the title role, its weight and its
	transform. Its family and its size are the title classes' own
	(.nino-section-title, .nino-card-title, .nino-hero-title): a heading
	with no class has always had the face of the text and the size of the
	browser, and keeps both. The weight is not on the classes because a title
	class on a p - the catalogue shows them so - has never been bold	*/
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-title-weight);
	text-transform: var(--font-title-transform);
}


/****************************************************************************************************
 *
 *
 *			02 Grid
 *
 *
 *			flexbox, mobile-first designed
 *
 *
 *			.nino-grid-row(--narrow, --wide, --full, --left, --right), .nino-grid(-25, -33, -50, -66, -75, -100)
 *			.nino-grid(-top, -middle, -bottom, -center)
 *			.nino-grid-row(--reverse, --s-reverse, --s-forward, --m-reverse, --m-forward, --l-reverse, --l-forward, --xl-reverse, --xl-forward)
 *			.nino-grid(-s,-m, -l, -xl)(-25, -33, -50, -66, -75, -100)
 *			.nino-grid-gap-0...6
 *			.nino-tiles > .nino-grid-row
 *			.nino-hide-(s, m, l), .nino-stack(-start, -center, -end, -gap-0...6)
 *
 *
 ****************************************************************************************************/

.nino-grid-row {
	--nino-grid-gap: 0px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nino-grid-gap);
	padding: 0 var(--grid-gutter);
	margin: 0 auto;
	width: 100%;
	max-width: var(--grid-max-width);
	box-sizing: border-box;
}
.nino-grid-row--narrow { max-width: 52rem; }
.nino-grid-row--wide { max-width: 92rem; }
/*	No maximum width at all: the row is as wide as the box it stands in and keeps
	its gutter, which nino-pl-0 and nino-pr-0 take away where the content is to
	stand at the edge too	*/
.nino-grid-row--full { max-width: none; }
/*	A row narrower than the page stands in the middle because it has an auto
	margin at both sides. --left and --right say one of them 0, and the auto one
	at the other side gets all the room that is left - one side is enough	*/
.nino-grid-row--left { margin-left: 0; }
.nino-grid-row--right { margin-right: 0; }
/*	The row of a section of tiles (.nino-tiles, chapter 04) is the section's whole
	width: no maximum width, no place in it, no gutter - the tiles carry the room.
	Asked for in :where() so that the rule is one class heavy, like the classes
	above, and stands after them: --narrow, --wide, --left and --right say nothing
	on it. Its gap is the section's, --tiles-gap, where it names none - the gap
	classes below come after, and win - and the padding classes of chapter 09 win
	over its padding. It is a size container, so that a tile can say its height
	from the width of the row (the tile rule, chapter 04)	*/
:where(.nino-tiles) > .nino-grid-row {
	--nino-grid-gap: var(--tiles-gap);
	container-type: inline-size;
	max-width: none;
	margin: 0;
	padding: 0;
}

.nino-grid--fullwidth {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

.nino-grid--fullheight {
	padding-top: 0;
	padding-bottom: 0;
}

/*	The row draws --nino-grid-gap between its columns, and a column gives back
	the share of it that a column of its width takes in a row of equal columns:
	3/4 of a gap for a quarter, 2/3 for a third, 1/2, 1/3 and 1/4 for the
	others, none for a column of the whole row. The shares of a row add up to
	(k - 1) gaps for k columns whatever the mix of widths, since a share is
	1 - w and the widths add up to 1, so that a third beside two thirds take one
	gap and a row never wraps for its gap. With the property at 0px, which a row
	without a gap class has, every width is the percentage it always was	*/
.nino-grid-25 { width: calc(25% - .75 * var(--nino-grid-gap, 0px)); --nino-grid-share: .25; }
.nino-grid-33 { width: calc(100% / 3 - var(--nino-grid-gap, 0px) * 2 / 3); --nino-grid-share: calc( 1 / 3 ); }
.nino-grid-50 { width: calc(50% - .5 * var(--nino-grid-gap, 0px)); --nino-grid-share: .5; }
.nino-grid-66 { width: calc(100% / 1.5 - var(--nino-grid-gap, 0px) / 3); --nino-grid-share: calc( 2 / 3 ); }
.nino-grid-75 { width: calc(75% - .25 * var(--nino-grid-gap, 0px)); --nino-grid-share: .75; }
.nino-grid-100 { width: 100%; --nino-grid-share: 1; }

.nino-grid-top { align-items: flex-start; }
.nino-grid-middle { align-items: center; }
.nino-grid-bottom { align-items: flex-end; }
.nino-grid-center { justify-content: center; }

/*	The order of a row turned round, for a width and up. --reverse is the row in
	the opposite order on every width, --<tier>-reverse from that tier's
	breakpoint up, and --<tier>-forward turns it back from there - the tiers
	stand in the order of the width classes below and a later one wins over an
	earlier one, as they do.
	row-reverse alone would leave the lines in their order and put the last
	column of a line first; wrap-reverse as well puts the last line first, so
	that the stack of one column a line, which a phone has, reads from the last
	column to the first - the whole reading order, turned round.
	A turned row would carry its alignment with it, so each rule says again what
	the alignment classes mean: row-reverse packs the columns of a line that is
	not full at the end, and a row that is not centred says flex-end for them to
	stand at the left, as they did; wrap-reverse turns the cross axis round, so
	that top says flex-end and bottom flex-start. Middle and centre are the
	same either way. The justify rule asks for a row that is not centred, which
	makes it weigh two classes and no more than the alignment rules after it:
	nino-grid-center is not turned by it, and nothing else of the row is	*/
.nino-grid-row--reverse { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
.nino-grid-row--reverse:not(.nino-grid-center) { justify-content: flex-end; }
.nino-grid-row--reverse.nino-grid-top { align-items: flex-end; }
.nino-grid-row--reverse.nino-grid-bottom { align-items: flex-start; }

.nino-grid-row > * {
	min-width: 0;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.nino-grid-s-25 { width: calc(25% - .75 * var(--nino-grid-gap, 0px)); --nino-grid-share: .25; }
	.nino-grid-s-33 { width: calc(100% / 3 - var(--nino-grid-gap, 0px) * 2 / 3); --nino-grid-share: calc( 1 / 3 ); }
	.nino-grid-s-50 { width: calc(50% - .5 * var(--nino-grid-gap, 0px)); --nino-grid-share: .5; }
	.nino-grid-s-66 { width: calc(100% / 1.5 - var(--nino-grid-gap, 0px) / 3); --nino-grid-share: calc( 2 / 3 ); }
	.nino-grid-s-75 { width: calc(75% - .25 * var(--nino-grid-gap, 0px)); --nino-grid-share: .75; }
	.nino-grid-s-100 { width: 100%; --nino-grid-share: 1; }
	.nino-grid-row--s-reverse { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
	.nino-grid-row--s-reverse:not(.nino-grid-center) { justify-content: flex-end; }
	.nino-grid-row--s-reverse.nino-grid-top { align-items: flex-end; }
	.nino-grid-row--s-reverse.nino-grid-bottom { align-items: flex-start; }
	.nino-grid-row--s-forward { flex-direction: row; flex-wrap: wrap; }
	.nino-grid-row--s-forward:not(.nino-grid-center) { justify-content: flex-start; }
	.nino-grid-row--s-forward.nino-grid-top { align-items: flex-start; }
	.nino-grid-row--s-forward.nino-grid-bottom { align-items: flex-end; }
}

@media (min-width: 768px) {
	.nino-grid-m-25 { width: calc(25% - .75 * var(--nino-grid-gap, 0px)); --nino-grid-share: .25; }
	.nino-grid-m-33 { width: calc(100% / 3 - var(--nino-grid-gap, 0px) * 2 / 3); --nino-grid-share: calc( 1 / 3 ); }
	.nino-grid-m-50 { width: calc(50% - .5 * var(--nino-grid-gap, 0px)); --nino-grid-share: .5; }
	.nino-grid-m-66 { width: calc(100% / 1.5 - var(--nino-grid-gap, 0px) / 3); --nino-grid-share: calc( 2 / 3 ); }
	.nino-grid-m-75 { width: calc(75% - .25 * var(--nino-grid-gap, 0px)); --nino-grid-share: .75; }
	.nino-grid-m-100 { width: 100%; --nino-grid-share: 1; }
	.nino-grid-row--m-reverse { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
	.nino-grid-row--m-reverse:not(.nino-grid-center) { justify-content: flex-end; }
	.nino-grid-row--m-reverse.nino-grid-top { align-items: flex-end; }
	.nino-grid-row--m-reverse.nino-grid-bottom { align-items: flex-start; }
	.nino-grid-row--m-forward { flex-direction: row; flex-wrap: wrap; }
	.nino-grid-row--m-forward:not(.nino-grid-center) { justify-content: flex-start; }
	.nino-grid-row--m-forward.nino-grid-top { align-items: flex-start; }
	.nino-grid-row--m-forward.nino-grid-bottom { align-items: flex-end; }
}

@media (min-width: 1024px) {
	.nino-grid-l-25 { width: calc(25% - .75 * var(--nino-grid-gap, 0px)); --nino-grid-share: .25; }
	.nino-grid-l-33 { width: calc(100% / 3 - var(--nino-grid-gap, 0px) * 2 / 3); --nino-grid-share: calc( 1 / 3 ); }
	.nino-grid-l-50 { width: calc(50% - .5 * var(--nino-grid-gap, 0px)); --nino-grid-share: .5; }
	.nino-grid-l-66 { width: calc(100% / 1.5 - var(--nino-grid-gap, 0px) / 3); --nino-grid-share: calc( 2 / 3 ); }
	.nino-grid-l-75 { width: calc(75% - .25 * var(--nino-grid-gap, 0px)); --nino-grid-share: .75; }
	.nino-grid-l-100 { width: 100%; --nino-grid-share: 1; }
	.nino-grid-row--l-reverse { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
	.nino-grid-row--l-reverse:not(.nino-grid-center) { justify-content: flex-end; }
	.nino-grid-row--l-reverse.nino-grid-top { align-items: flex-end; }
	.nino-grid-row--l-reverse.nino-grid-bottom { align-items: flex-start; }
	.nino-grid-row--l-forward { flex-direction: row; flex-wrap: wrap; }
	.nino-grid-row--l-forward:not(.nino-grid-center) { justify-content: flex-start; }
	.nino-grid-row--l-forward.nino-grid-top { align-items: flex-start; }
	.nino-grid-row--l-forward.nino-grid-bottom { align-items: flex-end; }
}

@media (min-width: 1280px) {
	.nino-grid-xl-25 { width: calc(25% - .75 * var(--nino-grid-gap, 0px)); --nino-grid-share: .25; }
	.nino-grid-xl-33 { width: calc(100% / 3 - var(--nino-grid-gap, 0px) * 2 / 3); --nino-grid-share: calc( 1 / 3 ); }
	.nino-grid-xl-50 { width: calc(50% - .5 * var(--nino-grid-gap, 0px)); --nino-grid-share: .5; }
	.nino-grid-xl-66 { width: calc(100% / 1.5 - var(--nino-grid-gap, 0px) / 3); --nino-grid-share: calc( 2 / 3 ); }
	.nino-grid-xl-75 { width: calc(75% - .25 * var(--nino-grid-gap, 0px)); --nino-grid-share: .75; }
	.nino-grid-xl-100 { width: 100%; --nino-grid-share: 1; }
	.nino-grid-row--xl-reverse { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
	.nino-grid-row--xl-reverse:not(.nino-grid-center) { justify-content: flex-end; }
	.nino-grid-row--xl-reverse.nino-grid-top { align-items: flex-end; }
	.nino-grid-row--xl-reverse.nino-grid-bottom { align-items: flex-start; }
	.nino-grid-row--xl-forward { flex-direction: row; flex-wrap: wrap; }
	.nino-grid-row--xl-forward:not(.nino-grid-center) { justify-content: flex-start; }
	.nino-grid-row--xl-forward.nino-grid-top { align-items: flex-start; }
	.nino-grid-row--xl-forward.nino-grid-bottom { align-items: flex-end; }
}

/*	Visibility per viewport - what a section written by the Builder says of a
	column. The three ranges are the ones the widths above end up in: a
	-s- width applies from 640px and is replaced by the -m- one at 768px, so
	"s" is everything below 768px, "m" 768px up to 1024px and "l" from there.
	!important because a column that is a stack sets a display of its own
	(below), and a class that hides has to win over it wherever it stands	*/
@media (max-width: 767.98px) {
	.nino-hide-s { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.nino-hide-m { display: none !important; }
}
@media (min-width: 1024px) {
	.nino-hide-l { display: none !important; }
}

/*	The stack a column is: its components one below the other with one gap
	between them, and the room they leave in the column placed at the start,
	the middle or the end of it. A column opts in with a class of its own - the
	gap or the placement - rather than every child of a row becoming a grid,
	which would change what a page that never heard of it looks like: grid
	items do not collapse their margins, and a link beside a word is two of
	them. --nino-stack-gap is what the classes set and what a nested stack
	reads, with the space the theme calls 2 where nobody chose; the gap the
	column draws is that times --whitespace-gap	*/
.nino-grid-row > .nino-stack-start,
.nino-grid-row > .nino-stack-center,
.nino-grid-row > .nino-stack-end,
.nino-grid-row > [class*="nino-stack-gap-"]:not(.nino-stack) {
	display: grid;
	gap: calc(var(--nino-stack-gap, var(--space-2)) * var(--whitespace-gap));
	align-content: start;
}
.nino-grid-row > .nino-stack-center { align-content: center; }
.nino-grid-row > .nino-stack-end { align-content: end; }
/*	A grid item stretches over its column; a button is as wide as its label,
	and sits where the column's text does	*/
.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)) > .nino-btn { justify-self: start; }
.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-center > .nino-btn { justify-self: center; }
.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-right > .nino-btn { justify-self: end; }

/*	A stack of elements - the row [stack], [filter] and the rest draw their
	cells in. The cells are the grid's own, with widths from the classes above;
	the gap is padding, half of it on every side of a cell, and the row reaches
	half a gap past its container to take the outer halves back, so that
	neighbours are one gap apart and the stack's edges are the column's.
	The row's width is stated, not left to "auto": it also stands in a flex
	container (.nino-filter), where auto would shrink it to its content.
	Inside, the pieces of a cell are one below the other, a space apart. The
	gap is the one the classes set times --whitespace-gap, said once as
	--nino-stack-gap-scaled, so that the padding of the cells and the reach of
	the row cannot part. The stack draws its gaps as padding and no row gap, so
	it says --nino-grid-gap: 0px: the property is inherited from the row of a
	section that the stack stands in, and the cells here, columns by their width
	classes, would give back a gap that is not drawn. The stack is a
	.nino-grid-row, whose own declaration does the same; it is said here as well
	because this is the rule that is about the stack	*/
.nino-stack {
	--nino-grid-gap: 0px;
	--nino-stack-gap: var(--space-2);
	--nino-stack-gap-scaled: calc(var(--nino-stack-gap) * var(--whitespace-gap));
	width: calc(100% + var(--nino-stack-gap-scaled));
	max-width: none;
	margin: calc(var(--nino-stack-gap-scaled) / -2);
	padding: 0;
}
.nino-stack > * {
	display: grid;
	align-content: start;
	gap: calc(var(--space-1) * var(--whitespace-gap));
	padding: calc(var(--nino-stack-gap-scaled) / 2);
}
.nino-stack > * > .nino-btn { justify-self: start; }
/*	The cells of a stack are one below the other on a phone. The classes of the
	grid are the only width a cell has, and the three widths of a stack start at
	640px (-s-), 768px (-m-) and 1024px (-l-): below 640px a cell would be as wide
	as its content, and a loop of cards with short texts would draw narrow cards
	side by side	*/
@media (max-width: 639.98px) {
	.nino-stack > * { width: 100%; }
}
/*	After .nino-stack, which sets a gap of its own: the class on the same
	element has to be the later one	*/
.nino-stack-gap-0 { --nino-stack-gap: 0px; }
.nino-stack-gap-1 { --nino-stack-gap: var(--space-1); }
.nino-stack-gap-2 { --nino-stack-gap: var(--space-2); }
.nino-stack-gap-3 { --nino-stack-gap: var(--space-3); }
.nino-stack-gap-4 { --nino-stack-gap: var(--space-4); }
.nino-stack-gap-5 { --nino-stack-gap: var(--space-5); }
.nino-stack-gap-6 { --nino-stack-gap: var(--space-6); }

/*	The gap between the columns of a row: --nino-grid-gap, which the row draws
	as its gap and its columns give back in their widths. No gap, or a step of
	the space scale times the whitespace between pieces, as the gap of a stack is.
	After .nino-grid-row, which declares 0px, so that the class on the same
	element is the later one	*/
.nino-grid-gap-0 { --nino-grid-gap: 0px; }
.nino-grid-gap-1 { --nino-grid-gap: calc(var(--space-1) * var(--whitespace-gap)); }
.nino-grid-gap-2 { --nino-grid-gap: calc(var(--space-2) * var(--whitespace-gap)); }
.nino-grid-gap-3 { --nino-grid-gap: calc(var(--space-3) * var(--whitespace-gap)); }
.nino-grid-gap-4 { --nino-grid-gap: calc(var(--space-4) * var(--whitespace-gap)); }
.nino-grid-gap-5 { --nino-grid-gap: calc(var(--space-5) * var(--whitespace-gap)); }
.nino-grid-gap-6 { --nino-grid-gap: calc(var(--space-6) * var(--whitespace-gap)); }

/****************************************************************************************************
 *
 *
 *			03 HTML Barebone
 *
 *
 *			header, .nino-logo, footer
 *			.nino-logo-set (.nino-logo-light, .nino-logo-dark), see [logo]
 *			.nino-scroll-header (fades/hides on scroll, see Nino.ui.js)
 *
 *
 ****************************************************************************************************/

/*	How far the bar of the header has grown past its min-height: Nino.ui.js
	writes it onto :root while the bar is wrapped onto a second row of links, and
	a frame that clears the fixed header with the bar's height adds it to its
	padding. 0 where the bar is one row, or the script does not run	*/
:root {
	--nino-header-grow: 0px;
}
header {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 998;
}
/* logo + nav side by side, scoped to header so the generic .nino-grid-100
   utility elsewhere is unaffected */
header .nino-grid-100 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}
.nino-logo {
	display: block;
	width: 10vw;
	height: 3vw;
	min-width:150px;
	min-height:60px;
	margin: var(--space-1);
	flex-shrink: 0;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}
.nino-logo img,
.nino-logo svg {
	width: 100%;
	height: auto;
}
/*	The name of the site, written out in the link of the logo for the day there
	is no logo: a link with nothing in it to see is a stop of the Tab key that
	nobody can find. It is the copy of the name that a screen reader is spared -
	the heading beside it says it already - and with a picture in the link the
	picture is the name, and the copy stays out of the way	*/
.nino-logo:has(img) > span[aria-hidden="true"] {
	display: none;
}
/*	[logo], the pictures of two slots in one set: the one for a light ground and
	the one for a dark ground. The ground says which is seen, through the pair
	--logo-light and --logo-dark (see the roles in :root and Grounds in chapter 04);
	where nothing set the pair, it is the page's, and the picture for a light
	ground is seen. The hidden one is display none, so the box of the set is one
	picture and .nino-logo img above sizes it. A set of one picture has nothing to
	choose from and shows it on every ground	*/
.nino-logo-set {
	display: block;
}
.nino-logo-set .nino-logo-light {
	display: var(--logo-light, block);
}
.nino-logo-set .nino-logo-dark {
	display: var(--logo-dark, none);
}
.nino-logo-set > img:only-child {
	display: block;
}
/*	On paper there is no ground: the sheet is white whatever a frame painted on
	the screen, so the pair is the page's - the picture for a light ground - on
	every element that stands in it. A dark header printed with the picture for a
	dark ground would be a light mark on white paper. The one place a pair is
	made to win against every ground, whatever its specificity and its place in
	the sheet, hence the !important	*/
@media print {
	:root, :root * {
		--logo-light: block !important;
		--logo-dark: none !important;
	}
}
footer {
	width: 100%;
	box-sizing: border-box;
	font-size:.8em;
	--logo-light: var(--color-footer-logo-light);
	--logo-dark: var(--color-footer-logo-dark);
}
/*	Footer navigation and the locale picker are the one place a link is a
	standalone control rather than part of a sentence, and at the footer's
	.8em they came out 18px tall with 19px between them - under WCAG 2.2 SC
	2.5.8's 24px minimum, with neither the inline nor the spacing exception to
	fall back on. The header frames already pad their own nav links; this is
	the same padding for the bands that do not.	*/
footer .nino-nav-content li a,
footer .nino-localepicker-wrap li :is(a, span) {
	display: inline-block;
	padding-top: var(--space-1);
	padding-bottom: var(--space-1);
}
.nino-footer-main {
	background:var(--color-footer-bg-main);
	color:var(--color-footer-text-main);
	padding: var(--space-3) var(--space-3) 0;
}
.nino-footer-legal {
	background:var(--color-footer-bg-legal);
	color:var(--color-footer-text-legal);
	padding: var(--space-1) var(--space-3);
}
/*	Both bands render this, and they are not the same surface - naming the
	dark section's ink here put a white label on a light footer	*/
.nino-footer-title {
	color:inherit;
	font-size:.9rem;
	text-transform:uppercase;
	padding-bottom: var(--space-1);
}
/*	The logo of a footer is the class of the set [logo] draws, on the wrapper:
	the opacity and the width are the set's, and the pictures in it follow	*/
.nino-footer-logo {
	opacity:.7;
	max-width:8rem;
}
.nino-footer-getintouch li {
	padding-bottom: var(--space-1);
	display:flex;
}
/*	The icon is drawn in the colour of its row. .nino-icon sets the page's text
	colour for itself, and on a footer whose ground is dark that is the colour
	of the ground - an icon nobody sees	*/
.nino-footer-getintouch .nino-icon {
	color: inherit;
	fill:currentColor;
	margin-right: var(--space-1);
}
.nino-footer-localepicker {
  display: flex;
  justify-content: flex-end;
  gap:var(--space-4);
}

/* header is position:fixed, so main needs top padding to avoid its content
   being covered - except when the page opens with a cover/parallax hero,
   which is designed to sit flush behind the (semi-transparent) header */
main {
	/* Takes the leftover column height, which is what pushes `footer` down
	   to the bottom edge on a page too short to fill the viewport. flex-basis
	   auto + no shrink so a long page still lays out from its content */
	flex: 1 0 auto;
	padding-top: var(--space-6);
	/* A viewport animation starts outside its own box - nino-vpa--zoom-out-*
	   scales past it, nino-vpa--slide-* shifts it sideways - and any of them
	   on a full-width element used to widen the document and leave the page
	   scrolling horizontally until the animation had played. `clip` rather
	   than `hidden`: it stops the overflow without turning main into a scroll
	   container, so position:sticky inside it keeps working */
	overflow-x: clip;
}
/*	The target of the skip link. It can be focused so that the focus can be put
	there - tabindex="-1", no stop of the Tab key - and a ring round the whole of
	the main part of a page says nothing: the next stop of the Tab key is in it	*/
main[tabindex="-1"]:focus-visible {
	outline: none;
}
/* The Builder writes a div.nino-wrap around a page's sections, which puts the
   hero one level down - the second selector of each pair is that form. A wrap
   with the class .nino-wrap--vpa says the sections of the page animate: a
   marker the Builder reads and no rule styles, the animation is the nino-vpa
   classes of the rows */
main:has(> .nino-cover.nino-hero:first-child),
main:has(> .nino-wrap > .nino-cover.nino-hero:first-child),
main:has(> .nino-parallex.nino-hero:first-child),
main:has(> .nino-wrap > .nino-parallex.nino-hero:first-child),
main:has(> .nino-hero--fullscreen:first-child),
main:has(> .nino-wrap > .nino-hero--fullscreen:first-child) {
	padding-top: 0;
}
/* Scroll-driven header show/hide, opt-in via .nino-scroll-header */
.nino-scroll-header {
	overflow: hidden;
	max-height: max(200px, 50vh);
	opacity: .6;
	transition: max-height .4s, padding-top .4s, padding-bottom .4s, border-top-width .4s, border-bottom-width .4s, opacity .4s;
	background-color:var(--color-header-bg);
}
body.nino-scroll-atf .nino-scroll-header {
	opacity: 1;
	background-color:transparent;
}
.nino-scroll-header:hover,
.nino-scroll-header:has(:focus-visible) {
	opacity: 1;
}
/* Collapsed means gone. A header preset gives its bar a height with
   min-height, with vertical padding and with a border, and none of the three
   yields to max-height: min-height wins over it outright, padding is never
   squeezed below what it asks for, and a border is drawn whatever the box
   does. So the collapsed state takes all of them back here, rather than every
   preset having to know that this rule exists - which is what went wrong:
   five presets, five bars that stayed on screen.

   A preset that is not a bar opts out where it says so - the sidebar rail
   sets max-height: none for itself above its own breakpoint.

   Not while the focus is in it: a bar folded to nothing with a link focused
   in it is a focus nobody can see, and Shift+Tab out of the page's content
   lands there - :has(:focus-visible), not :focus-within, so that a header link
   clicked with the pointer (an anchor of a one-page menu) does not keep the bar
   open while the page scrolls. :not() rather than a second rule with the open
   values, since the bar's height, padding and rule are the preset's and
   nothing here knows them - taking the collapse back is all it takes. In
   :where(), so that the rule is as specific as it was, and the opt-out of a
   preset or of a project - the rail's - still wins over it as it did. */
body.nino-scroll-down .nino-scroll-header:where(:not(:has(:focus-visible))) {
	max-height: 0;
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top-width: 0;
	border-bottom-width: 0;
}


/****************************************************************************************************
 *
 *
 *			04 Content
 *
 *
 *			.nino-hero(--fullscreen), .nino-hero(-title, -subtitle, -arrowdown)
 *			.nino-section(--alt, --tint, --dark, --black, --primary, --brand-alt, --dim, --border-1/2/3, --mirrored), .nino-section(-title, -subtitle, -text)
 *			.nino-grid-row(--alt, --tint, --dark, --black, --primary, --brand-alt, --counter, --dim), .nino-grid-row-bg
 *			.nino-grid(--alt, --tint, --dark, --black, --primary, --brand-alt, --counter, --dim)
 *			.nino-card(--alt, --tint, --dark, --black, --primary, --brand-alt, --counter, --dim, --fill, --middle, --bottom, --last-bottom, --linked, --fullwidth), .nino-card(-content, -title, -subtitle, -descr, -img, -price, -bg)
 *			.nino-tiles(--1-1, --4-3, --3-2, --16-9, --21-9, --4-1, --5-1), .nino-grid--linked
 *			.nino-ink(--muted, --accent)
 *
 *			Three rules that reach beyond the class they stand at: a section is the box
 *			its arrow and its picture are placed in (.nino-section is positioned); the
 *			row of a cover is centred by translate, so that the viewport animation of
 *			the row composes with it, and has the air above its content and from 768px
 *			the side padding of the section (chapter 08); a link in a text
 *			(.nino-section-text, .nino-card-descr) is the accent ink of its ground and
 *			is underlined on hover and on keyboard focus.
 *
 *
 ****************************************************************************************************/

.nino-hero {
	position: relative;
}
/*	The hero takes the face of the title and of the subtitle role, and their
	size times --scale-loud: it is the loud variant of a section's title and
	subtitle and has no number of its own. The leading keeps its ratio to the
	size - 1.3 / 1.2 below 768px, 1.2 from there - and moves with it	*/
.nino-hero-title {
	font-family: var(--fontfamily-title);
	font-size: calc( var(--font-title-size) * var(--scale-loud) );
	text-transform: var(--font-title-transform);
	color: var(--color-title);
	margin-bottom: calc(var(--space-3) * var(--whitespace-text));
	line-height: calc( var(--font-title-size) * var(--scale-loud) *1.3 / 1.2 );
}
.nino-hero-subtitle {
	font-family: var(--fontfamily-subtitle);
	font-size: calc( var(--font-subtitle-size) * var(--scale-loud) );
	font-weight: var(--font-subtitle-weight);
	text-transform: var(--font-subtitle-transform);
	color: var(--color-subtitle);
	opacity: .8;
	line-height: calc( var(--font-subtitle-size) * var(--scale-loud) *1.3 / 1.2 );
	margin-bottom: calc(var(--space-3) * var(--whitespace-text));
}
/*	The variants are the size the hero has - the role times --scale-loud -
	times --scale-quiet or --scale-loud again, and the leading keeps its ratio
	to the size: 1.3 / 1.2 for a quiet title, 1 for a loud one, 1.4 / 1.2 and
	1.3 / 1.2 for the subtitles	*/
.nino-hero-title--quiet { font-size: calc( var(--font-title-size) * var(--scale-loud) * var(--scale-quiet) ); line-height: calc( var(--font-title-size) * var(--scale-loud) * var(--scale-quiet) *1.3 / 1.2 ); }
.nino-hero-title--loud { font-size: calc( var(--font-title-size) * var(--scale-loud) * var(--scale-loud) ); line-height: calc( var(--font-title-size) * var(--scale-loud) * var(--scale-loud) ); }
.nino-hero-subtitle--quiet { font-size: calc( var(--font-subtitle-size) * var(--scale-loud) * var(--scale-quiet) ); line-height: calc( var(--font-subtitle-size) * var(--scale-loud) * var(--scale-quiet) *1.4 / 1.2 ); opacity: .7; }
.nino-hero-subtitle--loud { font-size: calc( var(--font-subtitle-size) * var(--scale-loud) * var(--scale-loud) ); line-height: calc( var(--font-subtitle-size) * var(--scale-loud) * var(--scale-loud) *1.3 / 1.2 ); opacity: 1; }
/*	Self-contained: the chevron is a mask over currentColor, so it always
 *	matches the text color around it - dark hero, light hero, whatever - and
 *	using it is just <a class="nino-hero-arrowdown" href="#some-id"
 *	aria-label="...">, which [scroll-hint] writes, or the button of old,
 *	<button class="nino-hero-arrowdown" data-arrow-target="#some-id">label</button>
 *	- no icon markup, no extra CSS file. The mask is on the ::before and never
 *	on the arrow: a mask clips everything its element paints, and the focus
 *	ring is painted outside the box, so an arrow that wore the mask itself
 *	would show a keyboard user no ring at all. A link with data-arrow-next and
 *	a # for an address goes to the section after the one it is in. Click
 *	behavior (smooth-scroll to data-arrow-target, or to the next section) is
 *	wired in Nino.ui.js. It stands at the foot of the section it is in - every
 *	section is the box it is placed against, see .nino-section - and it is
 *	centred by translate and not by transform: the bounce below moves transform,
 *	so would a viewport animation on the arrow (nino-vpa), and a property has one
 *	value at a time, so that whichever of them applies takes the centring away */
.nino-hero-arrowdown {
	position: absolute;
	bottom: var(--space-2);
	left: 50%;
	translate: -50% 0;
	z-index: 100;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	background-color: transparent;
	color: inherit;
	cursor: pointer;
	animation: nino-hero-arrowdown-bounce 1.8s ease-in-out 2;
}
/*	Two runs of 1.8s are 3.6s - an arrow that bounced for good moved on its own
	for as long as the page was open, where SC 2.2.2 allows five seconds	*/
.nino-hero-arrowdown::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath fill='%23fff' d='M325.607 79.393c-5.857-5.857-15.355-5.858-21.213.001L165.004 218.787 25.607 79.393c-5.857-5.857-15.355-5.858-21.213.001-5.858 5.858-5.858 15.355 0 21.213l150.004 150c2.813 2.813 6.628 4.393 10.606 4.393s7.794-1.581 10.606-4.394l149.996-150c5.859-5.857 5.859-15.355.001-21.213z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath fill='%23fff' d='M325.607 79.393c-5.857-5.857-15.355-5.858-21.213.001L165.004 218.787 25.607 79.393c-5.857-5.857-15.355-5.858-21.213.001-5.858 5.858-5.858 15.355 0 21.213l150.004 150c2.813 2.813 6.628 4.393 10.606 4.393s7.794-1.581 10.606-4.394l149.996-150c5.859-5.857 5.859-15.355.001-21.213z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
@keyframes nino-hero-arrowdown-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(.4rem); }
}

/* Fullscreen hero without an image - nino-cover/nino-parallex size themselves
   via data-cover-height (JS), this is the CSS-only equivalent for a plain
   nino-hero section with no image to size against. A nino-parallex with no
   data-cover-height is not JS-sized either, and needs no such help: it is at
   least 60vh high and grows with what it holds */
.nino-hero--fullscreen {
	min-height: 100vh;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

/*	Every section is the containing block of what is placed in it: the arrow at
	its foot (.nino-hero-arrowdown, absolute, the last child of the section) and
	the picture behind it (.nino-section-bg). The cover, the parallax and the
	section with a picture behind it were; a plain section and one whose picture
	stands in its row were not, and their arrow stood at the foot of the first
	screen of the page. No z-index, and nothing else that makes a stacking
	context: the layers inside a section order in the context round it, as they
	did when the section was not placed	*/
.nino-section {
	--color-ground: var(--color-section-default-bg);
	--color-ink: var(--color-section-default-text);
	--logo-light: var(--color-section-default-logo-light);
	--logo-dark: var(--color-section-default-logo-dark);
	position: relative;
	padding: calc(var(--space-4) * var(--whitespace-scale)) 0;
	background-color: var(--color-section-default-bg);
	color: var(--color-section-default-text);
	box-sizing: border-box;
	width: 100%;
}
/*	Grounds. A section, a row, a column and a card paint a ground with the
	same words - alt, tint, dark, black, primary and brand-alt, written
	.nino-section--<x>, .nino-grid-row--<x>, .nino-grid--<x> and
	.nino-card--<x> - and a row, a column and a card may also ask for the
	counter ground, below. A ground is a
	surface, the ink solved for it and the roles solved against the pair: it
	paints itself with the first two and hands all of them to what stands in
	it, so that a title, a link, a button or a ring never has to know which
	ground it was dropped onto. --color-ground and --color-ink name the pair;
	--color-title, --color-subtitle, --color-accent, --color-focus and
	--color-border are the roles that follow it, and a rule that reads one of
	them is right on every ground. --logo-light and --logo-dark, which of the
	two pictures of a logo is seen, are set with the pair and handed down with
	the roles, and the counter families carry them as well. Nothing compares
	the ground of a thing with the ground it sits on - there is no
	.nino-section--alt .nino-card--alt - and an author who names a ground
	twice gets it twice. That goes for what is written on a ground as well: the title and
	the subtitle of a section and of a hero read --color-title and
	--color-subtitle, the outline button --color-accent, and the filter button
	and the arrow of a hero take the ink the ground paints. No rule of a
	section stands above them, because it would reach past a column or a card
	of another ground in between and write the ink of the section on it.	*/
.nino-section--dark, .nino-grid--dark, .nino-card--dark, .nino-grid-row--dark {
	--color-ground: var(--color-section-dark-bg);
	--color-ink: var(--color-section-dark-text);
	--logo-light: var(--color-section-dark-logo-light);
	--logo-dark: var(--color-section-dark-logo-dark);
	--color-title: var(--color-section-dark-text);
	--color-subtitle: var(--color-section-dark-text);
	--color-accent: var(--color-accent-dark);
	--color-focus: var(--color-focus-dark);
	--color-border: var(--color-border-dark);
	background-color: var(--color-ground);
	color: var(--color-ink);
}
.nino-section--black, .nino-grid--black, .nino-card--black, .nino-grid-row--black {
	--color-ground: var(--color-section-black-bg);
	--color-ink: var(--color-section-black-text);
	--logo-light: var(--color-section-black-logo-light);
	--logo-dark: var(--color-section-black-logo-dark);
	--color-title: var(--color-section-black-text);
	--color-subtitle: var(--color-section-black-text);
	--color-accent: var(--color-accent-black);
	--color-focus: var(--color-focus-black);
	--color-border: var(--color-border-black);
	background-color: var(--color-ground);
	color: var(--color-ink);
}
/*	The two brand grounds are filled with a brand colour and written on in
	the ink solved for it, and that ink is also what a title, a link and a
	ring on them are: an accent solved against a page would not clear the
	target on a brand surface	*/
.nino-section--primary, .nino-grid--primary, .nino-card--primary, .nino-grid-row--primary {
	--color-ground: var(--color-primary);
	--color-ink: var(--color-primary-text);
	--logo-light: var(--color-primary-logo-light);
	--logo-dark: var(--color-primary-logo-dark);
	--color-title: var(--color-primary-text);
	--color-subtitle: var(--color-primary-text);
	--color-accent: var(--color-primary-text);
	--color-focus: var(--color-primary-text);
	--color-border: var(--color-border-primary);
	background-color: var(--color-ground);
	color: var(--color-ink);
}
.nino-section--alt, .nino-grid--alt, .nino-card--alt, .nino-grid-row--alt {
	--color-ground: var(--color-section-alt-bg);
	--color-ink: var(--color-section-alt-text);
	--logo-light: var(--color-section-alt-logo-light);
	--logo-dark: var(--color-section-alt-logo-dark);
	--color-title: var(--color-section-alt-text);
	--color-subtitle: var(--color-section-alt-text);
	--color-accent: var(--color-accent-alt);
	--color-focus: var(--color-focus-alt);
	--color-border: var(--color-border-alt);
	background-color: var(--color-ground);
	color: var(--color-ink);
}
.nino-section--tint, .nino-grid--tint, .nino-card--tint, .nino-grid-row--tint {
	--color-ground: var(--color-section-tint-bg);
	--color-ink: var(--color-section-tint-text);
	--logo-light: var(--color-section-tint-logo-light);
	--logo-dark: var(--color-section-tint-logo-dark);
	--color-title: var(--color-section-tint-text);
	--color-subtitle: var(--color-section-tint-text);
	--color-accent: var(--color-accent-tint);
	--color-focus: var(--color-focus-tint);
	--color-border: var(--color-border-tint);
	background-color: var(--color-ground);
	color: var(--color-ink);
}
.nino-section--brand-alt, .nino-grid--brand-alt, .nino-card--brand-alt, .nino-grid-row--brand-alt {
	--color-ground: var(--color-brand-alt);
	--color-ink: var(--color-brand-alt-text);
	--logo-light: var(--color-brand-alt-logo-light);
	--logo-dark: var(--color-brand-alt-logo-dark);
	--color-title: var(--color-brand-alt-text);
	--color-subtitle: var(--color-brand-alt-text);
	--color-accent: var(--color-brand-alt-text);
	--color-focus: var(--color-brand-alt-text);
	--color-border: var(--color-border-brand-alt);
	background-color: var(--color-ground);
	color: var(--color-ink);
}

/*	The counter ground is the ground that sets a thing off from the one it
	sits on, and follows it when the section changes colour: alt for default,
	default for alt, black for dark and dark for black, brand-alt for primary
	and primary for brand-alt - and default for tint, which is a wash of the
	page: a card of the alt surface on it reads worse than the page's own,
	and default is what an alt card on a tint section has always become. A
	row, a column and a card ask for it by name, .nino-grid-row--counter,
	.nino-grid--counter and .nino-card--counter, and nothing is told which
	ground they sit on: the answer travels in the three families of :root,
	one property for each part of a ground. A section sets them to the
	counter of its own ground (grid, card) and to the counter of that
	(grid-next), and a row with a ground does the same for what stands in
	it; a column with a ground sets the card family; and a counter row or
	column sets its own ground from grid and the card family from grid-next
	- a var() that resolves against what the section left for it, so it
	needs no condition. Section alt > column counter > card counter is
	default and then alt; every nesting of the levels is the same two steps,
	with no selector that names one ground above another. The families hold
	two steps, so a counter column in a counter row is the ground of the row
	and only its cards step again.	*/
.nino-section--dark, .nino-grid-row--dark {
	--counter-grid-bg: var(--color-section-black-bg);
	--counter-grid-text: var(--color-section-black-text);
	--counter-grid-title: var(--color-section-black-text);
	--counter-grid-accent: var(--color-accent-black);
	--counter-grid-focus: var(--color-focus-black);
	--counter-grid-border: var(--color-border-black);
	--counter-grid-logo-light: var(--color-section-black-logo-light);
	--counter-grid-logo-dark: var(--color-section-black-logo-dark);
	--counter-grid-next-bg: var(--color-section-dark-bg);
	--counter-grid-next-text: var(--color-section-dark-text);
	--counter-grid-next-title: var(--color-section-dark-text);
	--counter-grid-next-accent: var(--color-accent-dark);
	--counter-grid-next-focus: var(--color-focus-dark);
	--counter-grid-next-border: var(--color-border-dark);
	--counter-grid-next-logo-light: var(--color-section-dark-logo-light);
	--counter-grid-next-logo-dark: var(--color-section-dark-logo-dark);
	--counter-card-bg: var(--color-section-black-bg);
	--counter-card-text: var(--color-section-black-text);
	--counter-card-title: var(--color-section-black-text);
	--counter-card-accent: var(--color-accent-black);
	--counter-card-focus: var(--color-focus-black);
	--counter-card-border: var(--color-border-black);
	--counter-card-logo-light: var(--color-section-black-logo-light);
	--counter-card-logo-dark: var(--color-section-black-logo-dark);
}
.nino-section--black, .nino-grid-row--black {
	--counter-grid-bg: var(--color-section-dark-bg);
	--counter-grid-text: var(--color-section-dark-text);
	--counter-grid-title: var(--color-section-dark-text);
	--counter-grid-accent: var(--color-accent-dark);
	--counter-grid-focus: var(--color-focus-dark);
	--counter-grid-border: var(--color-border-dark);
	--counter-grid-logo-light: var(--color-section-dark-logo-light);
	--counter-grid-logo-dark: var(--color-section-dark-logo-dark);
	--counter-grid-next-bg: var(--color-section-black-bg);
	--counter-grid-next-text: var(--color-section-black-text);
	--counter-grid-next-title: var(--color-section-black-text);
	--counter-grid-next-accent: var(--color-accent-black);
	--counter-grid-next-focus: var(--color-focus-black);
	--counter-grid-next-border: var(--color-border-black);
	--counter-grid-next-logo-light: var(--color-section-black-logo-light);
	--counter-grid-next-logo-dark: var(--color-section-black-logo-dark);
	--counter-card-bg: var(--color-section-dark-bg);
	--counter-card-text: var(--color-section-dark-text);
	--counter-card-title: var(--color-section-dark-text);
	--counter-card-accent: var(--color-accent-dark);
	--counter-card-focus: var(--color-focus-dark);
	--counter-card-border: var(--color-border-dark);
	--counter-card-logo-light: var(--color-section-dark-logo-light);
	--counter-card-logo-dark: var(--color-section-dark-logo-dark);
}
.nino-section--primary, .nino-grid-row--primary {
	--counter-grid-bg: var(--color-brand-alt);
	--counter-grid-text: var(--color-brand-alt-text);
	--counter-grid-title: var(--color-brand-alt-text);
	--counter-grid-accent: var(--color-brand-alt-text);
	--counter-grid-focus: var(--color-brand-alt-text);
	--counter-grid-border: var(--color-border-brand-alt);
	--counter-grid-logo-light: var(--color-brand-alt-logo-light);
	--counter-grid-logo-dark: var(--color-brand-alt-logo-dark);
	--counter-grid-next-bg: var(--color-primary);
	--counter-grid-next-text: var(--color-primary-text);
	--counter-grid-next-title: var(--color-primary-text);
	--counter-grid-next-accent: var(--color-primary-text);
	--counter-grid-next-focus: var(--color-primary-text);
	--counter-grid-next-border: var(--color-border-primary);
	--counter-grid-next-logo-light: var(--color-primary-logo-light);
	--counter-grid-next-logo-dark: var(--color-primary-logo-dark);
	--counter-card-bg: var(--color-brand-alt);
	--counter-card-text: var(--color-brand-alt-text);
	--counter-card-title: var(--color-brand-alt-text);
	--counter-card-accent: var(--color-brand-alt-text);
	--counter-card-focus: var(--color-brand-alt-text);
	--counter-card-border: var(--color-border-brand-alt);
	--counter-card-logo-light: var(--color-brand-alt-logo-light);
	--counter-card-logo-dark: var(--color-brand-alt-logo-dark);
}
.nino-section--alt, .nino-grid-row--alt {
	--counter-grid-bg: var(--color-section-default-bg);
	--counter-grid-text: var(--color-section-default-text);
	--counter-grid-title: var(--color-title-default);
	--counter-grid-accent: var(--color-accent-default);
	--counter-grid-focus: var(--color-focus-default);
	--counter-grid-border: var(--color-border-default);
	--counter-grid-logo-light: var(--color-section-default-logo-light);
	--counter-grid-logo-dark: var(--color-section-default-logo-dark);
	--counter-grid-next-bg: var(--color-section-alt-bg);
	--counter-grid-next-text: var(--color-section-alt-text);
	--counter-grid-next-title: var(--color-section-alt-text);
	--counter-grid-next-accent: var(--color-accent-alt);
	--counter-grid-next-focus: var(--color-focus-alt);
	--counter-grid-next-border: var(--color-border-alt);
	--counter-grid-next-logo-light: var(--color-section-alt-logo-light);
	--counter-grid-next-logo-dark: var(--color-section-alt-logo-dark);
	--counter-card-bg: var(--color-section-default-bg);
	--counter-card-text: var(--color-section-default-text);
	--counter-card-title: var(--color-title-default);
	--counter-card-accent: var(--color-accent-default);
	--counter-card-focus: var(--color-focus-default);
	--counter-card-border: var(--color-border-default);
	--counter-card-logo-light: var(--color-section-default-logo-light);
	--counter-card-logo-dark: var(--color-section-default-logo-dark);
}
.nino-section--tint, .nino-grid-row--tint {
	--counter-grid-bg: var(--color-section-default-bg);
	--counter-grid-text: var(--color-section-default-text);
	--counter-grid-title: var(--color-title-default);
	--counter-grid-accent: var(--color-accent-default);
	--counter-grid-focus: var(--color-focus-default);
	--counter-grid-border: var(--color-border-default);
	--counter-grid-logo-light: var(--color-section-default-logo-light);
	--counter-grid-logo-dark: var(--color-section-default-logo-dark);
	--counter-grid-next-bg: var(--color-section-alt-bg);
	--counter-grid-next-text: var(--color-section-alt-text);
	--counter-grid-next-title: var(--color-section-alt-text);
	--counter-grid-next-accent: var(--color-accent-alt);
	--counter-grid-next-focus: var(--color-focus-alt);
	--counter-grid-next-border: var(--color-border-alt);
	--counter-grid-next-logo-light: var(--color-section-alt-logo-light);
	--counter-grid-next-logo-dark: var(--color-section-alt-logo-dark);
	--counter-card-bg: var(--color-section-default-bg);
	--counter-card-text: var(--color-section-default-text);
	--counter-card-title: var(--color-title-default);
	--counter-card-accent: var(--color-accent-default);
	--counter-card-focus: var(--color-focus-default);
	--counter-card-border: var(--color-border-default);
	--counter-card-logo-light: var(--color-section-default-logo-light);
	--counter-card-logo-dark: var(--color-section-default-logo-dark);
}
.nino-section--brand-alt, .nino-grid-row--brand-alt {
	--counter-grid-bg: var(--color-primary);
	--counter-grid-text: var(--color-primary-text);
	--counter-grid-title: var(--color-primary-text);
	--counter-grid-accent: var(--color-primary-text);
	--counter-grid-focus: var(--color-primary-text);
	--counter-grid-border: var(--color-border-primary);
	--counter-grid-logo-light: var(--color-primary-logo-light);
	--counter-grid-logo-dark: var(--color-primary-logo-dark);
	--counter-grid-next-bg: var(--color-brand-alt);
	--counter-grid-next-text: var(--color-brand-alt-text);
	--counter-grid-next-title: var(--color-brand-alt-text);
	--counter-grid-next-accent: var(--color-brand-alt-text);
	--counter-grid-next-focus: var(--color-brand-alt-text);
	--counter-grid-next-border: var(--color-border-brand-alt);
	--counter-grid-next-logo-light: var(--color-brand-alt-logo-light);
	--counter-grid-next-logo-dark: var(--color-brand-alt-logo-dark);
	--counter-card-bg: var(--color-primary);
	--counter-card-text: var(--color-primary-text);
	--counter-card-title: var(--color-primary-text);
	--counter-card-accent: var(--color-primary-text);
	--counter-card-focus: var(--color-primary-text);
	--counter-card-border: var(--color-border-primary);
	--counter-card-logo-light: var(--color-primary-logo-light);
	--counter-card-logo-dark: var(--color-primary-logo-dark);
}

/*	A column that paints a ground keeps its content off the colour, and has the
	radius of its kind, --radius-column, where a card has its own - and cuts what
	is in it at that radius: a picture or a ground of a child that reaches its edge
	(nino-p-0) would otherwise stand out of the corner. clip, not hidden: nothing
	scrolls in it, and it makes no box of its own for the margins and the floats
	inside. The cards in it take the counter of its ground	*/
.nino-grid--alt, .nino-grid--tint, .nino-grid--dark, .nino-grid--black, .nino-grid--primary, .nino-grid--brand-alt, .nino-grid--counter, .nino-grid--dim {
	padding: var(--space-2);
	border-radius: var(--radius-column);
	overflow: clip;
}
.nino-grid--dark {
	--counter-card-bg: var(--color-section-black-bg);
	--counter-card-text: var(--color-section-black-text);
	--counter-card-title: var(--color-section-black-text);
	--counter-card-accent: var(--color-accent-black);
	--counter-card-focus: var(--color-focus-black);
	--counter-card-border: var(--color-border-black);
	--counter-card-logo-light: var(--color-section-black-logo-light);
	--counter-card-logo-dark: var(--color-section-black-logo-dark);
}
.nino-grid--black {
	--counter-card-bg: var(--color-section-dark-bg);
	--counter-card-text: var(--color-section-dark-text);
	--counter-card-title: var(--color-section-dark-text);
	--counter-card-accent: var(--color-accent-dark);
	--counter-card-focus: var(--color-focus-dark);
	--counter-card-border: var(--color-border-dark);
	--counter-card-logo-light: var(--color-section-dark-logo-light);
	--counter-card-logo-dark: var(--color-section-dark-logo-dark);
}
.nino-grid--primary {
	--counter-card-bg: var(--color-brand-alt);
	--counter-card-text: var(--color-brand-alt-text);
	--counter-card-title: var(--color-brand-alt-text);
	--counter-card-accent: var(--color-brand-alt-text);
	--counter-card-focus: var(--color-brand-alt-text);
	--counter-card-border: var(--color-border-brand-alt);
	--counter-card-logo-light: var(--color-brand-alt-logo-light);
	--counter-card-logo-dark: var(--color-brand-alt-logo-dark);
}
.nino-grid--alt {
	--counter-card-bg: var(--color-section-default-bg);
	--counter-card-text: var(--color-section-default-text);
	--counter-card-title: var(--color-title-default);
	--counter-card-accent: var(--color-accent-default);
	--counter-card-focus: var(--color-focus-default);
	--counter-card-border: var(--color-border-default);
	--counter-card-logo-light: var(--color-section-default-logo-light);
	--counter-card-logo-dark: var(--color-section-default-logo-dark);
}
.nino-grid--tint {
	--counter-card-bg: var(--color-section-default-bg);
	--counter-card-text: var(--color-section-default-text);
	--counter-card-title: var(--color-title-default);
	--counter-card-accent: var(--color-accent-default);
	--counter-card-focus: var(--color-focus-default);
	--counter-card-border: var(--color-border-default);
	--counter-card-logo-light: var(--color-section-default-logo-light);
	--counter-card-logo-dark: var(--color-section-default-logo-dark);
}
.nino-grid--brand-alt {
	--counter-card-bg: var(--color-primary);
	--counter-card-text: var(--color-primary-text);
	--counter-card-title: var(--color-primary-text);
	--counter-card-accent: var(--color-primary-text);
	--counter-card-focus: var(--color-primary-text);
	--counter-card-border: var(--color-border-primary);
	--counter-card-logo-light: var(--color-primary-logo-light);
	--counter-card-logo-dark: var(--color-primary-logo-dark);
}
.nino-grid--counter, .nino-grid-row--counter {
	--color-ground: var(--counter-grid-bg);
	--color-ink: var(--counter-grid-text);
	--logo-light: var(--counter-grid-logo-light);
	--logo-dark: var(--counter-grid-logo-dark);
	--color-title: var(--counter-grid-title);
	--color-subtitle: var(--counter-grid-text);
	--color-accent: var(--counter-grid-accent);
	--color-focus: var(--counter-grid-focus);
	--color-border: var(--counter-grid-border);
	--counter-card-bg: var(--counter-grid-next-bg);
	--counter-card-text: var(--counter-grid-next-text);
	--counter-card-title: var(--counter-grid-next-title);
	--counter-card-accent: var(--counter-grid-next-accent);
	--counter-card-focus: var(--counter-grid-next-focus);
	--counter-card-border: var(--counter-grid-next-border);
	--counter-card-logo-light: var(--counter-grid-next-logo-light);
	--counter-card-logo-dark: var(--counter-grid-next-logo-dark);
	background-color: var(--color-ground);
	color: var(--color-ink);
}
/*	A dimmed column is the dark ground whatever else it names, as a dimmed cover
	is what it is whatever its section is: the scrim darkens the picture, so the
	column writes in the ink of the dark ground, hands that ground's roles to what
	stands in it and the counter of it to its cards, and paints the pair under
	the picture. It comes once, after every ground of a column and after the
	counter - rules of the same specificity, so the last one wins - and a column
	that says --dim and --alt, --tint, --primary or --counter is not dark ink on
	a darkened picture. --color-text is the page's ink also where a rule reads
	that (an icon, a legend)	*/
.nino-grid--dim {
	--color-ground: var(--color-section-dark-bg);
	--color-ink: var(--color-section-dark-text);
	--logo-light: var(--color-section-dark-logo-light);
	--logo-dark: var(--color-section-dark-logo-dark);
	--color-title: var(--color-section-dark-text);
	--color-subtitle: var(--color-section-dark-text);
	--color-accent: var(--color-accent-dark);
	--color-focus: var(--color-focus-dark);
	--color-border: var(--color-border-dark);
	--color-text: var(--color-section-dark-text);
	--counter-card-bg: var(--color-section-black-bg);
	--counter-card-text: var(--color-section-black-text);
	--counter-card-title: var(--color-section-black-text);
	--counter-card-accent: var(--color-accent-black);
	--counter-card-focus: var(--color-focus-black);
	--counter-card-border: var(--color-border-black);
	--counter-card-logo-light: var(--color-section-black-logo-light);
	--counter-card-logo-dark: var(--color-section-black-logo-dark);
	background-color: var(--color-ground);
	color: var(--color-ink);
}

/*	A row that paints a ground - what a section has inside, the colour round
	the columns and not round the section - is the grounds above for a row, and
	is built as a column that paints one is: it keeps its content off the colour
	and has the radius of its kind, --radius-row. The room above and below is
	the section's own step times the whitespace, the gutter at the sides what a
	row has and the width ladder's to move, and the row keeps its maximum
	width. A row with a picture behind it (the block of its own, below) is the
	same box, and a dimmed one is the dark of its scrim: it is in the list of
	the inks of a dimmed cover, which comes after the grounds. The picture is
	asked for in :where(), which counts for nothing: the rule is one class
	heavy, as the base rule of the row before it, the grounds in its list and
	the padding classes at the end of the file are, so that the order decides -
	and nino-pt-2 or nino-pl-0 on such a row says what it says, where the two
	classes of :has() would have beaten it wherever it stood. It cuts what is in
	it at its radius, as a column does, so that a column with a ground of its own
	at the edge of the row (nino-p-0) does not stand out of the corner	*/
.nino-grid-row--alt, .nino-grid-row--tint, .nino-grid-row--dark, .nino-grid-row--black, .nino-grid-row--primary, .nino-grid-row--brand-alt, .nino-grid-row--counter, .nino-grid-row--dim,
.nino-grid-row:where(:has(> .nino-grid-row-bg)) {
	padding: calc(var(--space-3) * var(--whitespace-scale)) var(--grid-gutter);
	border-radius: var(--radius-row);
	overflow: clip;
}

/*	A section title and a section subtitle take the size of their role times a
	number of their own (--section-title-scale, --section-subtitle-scale), and
	the leading keeps its ratio to the size - 1.3 - and moves with it. Under the
	title runs a rule of --section-line, with six times that much air between:
	none, and no air, until a design layer gives it a thickness. The --quiet and
	--loud variants draw it too, since a page may use one without the class it
	varies.

	The subtitle is the colour of its role and no fainter: the role is solved
	to 4.5:1 against its ground, and the opacity it had - .8, and .7 on the
	quiet one, as .8 is on the quiet text - put the words at 3.1:1 and under.
	Quieter is smaller, and a design layer decides what is fainter	*/
.nino-section-title {
	font-family: var(--fontfamily-title);
	text-align: center;
	font-size: calc( var(--font-title-size) * var(--section-title-scale) );
	text-transform: var(--font-title-transform);
	color: var(--color-title);
	line-height: calc( var(--font-title-size) * var(--section-title-scale) *1.3 );
	margin: calc(var(--space-1) * var(--whitespace-text)) 0;
	border-bottom: var(--section-line) solid var(--color-border);
	padding-bottom: calc( var(--section-line) * 6 );
}
.nino-section-subtitle {
	font-family: var(--fontfamily-subtitle);
	text-align: center;
	font-size: calc( var(--font-subtitle-size) * var(--section-subtitle-scale) );
	font-weight: var(--font-subtitle-weight);
	text-transform: var(--font-subtitle-transform);
	color: var(--color-subtitle);
	line-height: calc( var(--font-subtitle-size) * var(--section-subtitle-scale) *1.3 );
	margin-bottom: calc(var(--space-2) * var(--whitespace-text));
}
/*	Body copy inside a section - the third member of title/subtitle/text */
.nino-section-text {
	font-size: var(--text-1);
	line-height: var(--line-height);
	margin-bottom: calc(var(--space-2) * var(--whitespace-text));
}

/*	The wrapper of a field or a key that keeps paragraphs and lists - an element
 *	field with 'blocks', a text key in the format 'blocks' (the editors call it
 *	"Paragraphs and lists"). The reset at the top takes every margin and marker
 *	away, so without this its paragraphs run together and its lists show no
 *	bullets; with it they read as the person wrote them. Put it on the element
 *	that holds the fill, next to .nino-section-text where that is the text's
 *	own class. */
.nino-richtext p,
.nino-richtext ul,
.nino-richtext ol {
	margin-bottom: calc(var(--space-2) * var(--whitespace-text));
}
.nino-richtext > :last-child {
	margin-bottom: 0;
}
.nino-richtext ul,
.nino-richtext ol {
	padding-left: 1.4em;
}
.nino-richtext ul > li {
	list-style-type: disc;
}
.nino-richtext ol > li {
	list-style-type: decimal;
}

/*	One section of the imprint or the privacy policy (Modules\Legal): its heading
 *	over a .nino-richtext, and a gap before the next section - the reset has
 *	taken the heading's own margins away */
.nino-legal-section {
	max-width: 40rem;
	margin-inline: auto;
}
.nino-legal-section > h3 {
	margin-bottom: calc(var(--space-1) * var(--whitespace-text));
}
.nino-legal-section + .nino-legal-section {
	margin-top: calc(var(--space-3) * var(--whitespace-text));
}

/*	--quiet and --loud are the size of the class they vary, smaller and larger,
 *	per class: the size of the title role times --section-title-scale for a
 *	section title, of the subtitle role times --section-subtitle-scale for a
 *	section subtitle, of the text role for the text - and for a card title, a
 *	card subtitle and a hero the size their base class has - times
 *	--scale-quiet or --scale-loud (.85 and 1.2). Each states its own size
 *	rather than scaling with em: an em font-size replaces the size the class
 *	sets for itself instead of adjusting it, so "loud" on a 1.5rem title used
 *	to make it smaller, not bigger. A title role that a design layer makes
 *	larger takes its quiet and its loud variant with it, and two numbers move
 *	every variant. Line height moves with the size, otherwise the new size
 *	sits in the old leading. A section title's variants draw its rule too
 *	(--section-line), the air under it included. */
.nino-section-title--quiet { font-size: calc( var(--font-title-size) * var(--section-title-scale) * var(--scale-quiet) ); line-height: calc( var(--font-title-size) * var(--section-title-scale) * var(--scale-quiet) *1.3 ); opacity: .8; border-bottom: var(--section-line) solid var(--color-border); padding-bottom: calc( var(--section-line) * 6 ); }
.nino-section-title--loud { font-size: calc( var(--font-title-size) * var(--section-title-scale) * var(--scale-loud) ); line-height: calc( var(--font-title-size) * var(--section-title-scale) * var(--scale-loud) *1.2 ); border-bottom: var(--section-line) solid var(--color-border); padding-bottom: calc( var(--section-line) * 6 ); }
.nino-section-subtitle--quiet { font-size: calc( var(--font-subtitle-size) * var(--section-subtitle-scale) * var(--scale-quiet) ); line-height: calc( var(--font-subtitle-size) * var(--section-subtitle-scale) * var(--scale-quiet) *1.4 ); }
.nino-section-subtitle--loud { font-size: calc( var(--font-subtitle-size) * var(--section-subtitle-scale) * var(--scale-loud) ); line-height: calc( var(--font-subtitle-size) * var(--section-subtitle-scale) * var(--scale-loud) *1.3 ); opacity: 1; }
.nino-section-text--quiet { font-size: calc( var(--font-text-size) * var(--scale-quiet) ); }
.nino-section-text--loud { font-size: calc( var(--font-text-size) * var(--scale-loud) ); line-height: calc( var(--font-text-size) * var(--scale-loud) *1.4 ); max-width: 52rem; }
.nino-text-center > .nino-section-text--loud { margin-right: auto; margin-left: auto; }
/*	The scrim is a dark ground like any other, so the roles follow it - the
	ink itself included, and the title and the subtitle: the titles and
	subtitles of a section and of a hero, the outline button, the filter button
	and the arrow of a hero take the colours of the scrim without a rule of the
	cover's own. Body copy, icons and anything else placed in a cover take
	their colour from the page, and on a dimmed photograph the page's ink is
	dark ink on a dark ground. A plain section with a picture behind it and a
	row with one are dimmed the same way, and have the same ink	*/
.nino-cover--dim, .nino-parallex--dim, .nino-section--dim, .nino-grid-row--dim {
	color: var(--color-section-black-text);
	--color-ground: var(--color-section-black-bg);
	--color-ink: var(--color-section-black-text);
	--logo-light: var(--color-section-black-logo-light);
	--logo-dark: var(--color-section-black-logo-dark);
	--color-title: var(--color-section-black-text);
	--color-subtitle: var(--color-section-black-text);
	--color-text: var(--color-section-black-text);
	--color-accent: var(--color-accent-black);
}

/*	The rule under a section. The strength, .nino-section--border-1 to -3, is its
	thickness and says nothing of its colour; the colour is --section-border-color,
	which is the faint dark line, rgba(0,0,0,.1), where nothing sets it, the faint
	light one on a dark or a black section that has a rule, and the brand colour
	where the section says nino-section--border-primary. Three classes used to set
	one property between them, and the dark rule - two classes heavy - beat the
	brand colour on a dark and a black section, whichever way round the classes
	stood. Now the dark and the black rule is asked for in :where() and stands at
	one class, as the brand colour does, and the colour that comes after it wins.
	The variable is inherited like any other: a container that sets it colours the
	rules in it that set none of their own	*/
.nino-section--border-1 { border-bottom-width: 1px; border-bottom-style: solid; }
.nino-section--border-2 { border-bottom-width: .25rem; border-bottom-style: solid; }
.nino-section--border-3 { border-bottom-width: .5rem; border-bottom-style: solid; }
.nino-section--border-1, .nino-section--border-2, .nino-section--border-3 {
	border-bottom-color: var(--section-border-color, rgba(0,0,0,.1));
}
.nino-section--dark:where(.nino-section--border-1, .nino-section--border-2, .nino-section--border-3),
.nino-section--black:where(.nino-section--border-1, .nino-section--border-2, .nino-section--border-3) {
	--section-border-color: rgba(255,255,255,.1);
}
.nino-section--border-primary {
	--section-border-color: var(--color-primary);
}

@media (min-width: 768px) {
	/*	From 768px the hero states its size and its leading again, after the
		--quiet and --loud rules above: an element with the base class and a
		variant gets the base size there, so the variant only acts below
		768px on it	*/
	.nino-hero-title { font-size: calc( var(--font-title-size) * var(--scale-loud) ); line-height: calc( var(--font-title-size) * var(--scale-loud) *1.2 );}
	.nino-hero-subtitle { font-size: calc( var(--font-subtitle-size) * var(--scale-loud) ); line-height: calc( var(--font-subtitle-size) * var(--scale-loud) *1.2 );}
	.nino-section { padding: calc(var(--space-5) * var(--whitespace-scale)) calc(var(--space-3) * var(--whitespace-scale)); }
	/*	A row at the edge takes the section's side padding with it. From 768px the
		section has a side padding of its own, the room between the page and its
		row, and a row that says nino-pl-0 or nino-pr-0 - its content at the edge -
		would still stand that far from it. So the section that holds such a row
		gives up the padding on that side, unless the section says a padding of
		its own (nino-pl-*, nino-pr-*, nino-p-*), which is then what it has; below
		768px it has none	*/
	.nino-section:has(> .nino-grid-row.nino-pl-0):not([class*="nino-pl-"], [class*="nino-p-"]) { padding-left: 0; }
	.nino-section:has(> .nino-grid-row.nino-pr-0):not([class*="nino-pr-"], [class*="nino-p-"]) { padding-right: 0; }
	/*	A mirrored section has the columns of its row in the opposite order - the
		first one at the right - so that a loop that says alternate="1" puts the
		picture on the other side from one section to the next. [sections] writes
		the class on every second section, and a template may write it on a
		section of its own. From 768px only: below it the columns keep the order of
		the markup, which puts a picture above its text in every section on a phone.
		The lines of a row that wraps keep their order, and the picture behind a
		row, which is placed on its own, does not move	*/
	.nino-section--mirrored > .nino-grid-row { flex-direction: row-reverse; }
}

/*	A card has the radius of its kind and cuts what is in it at it: the picture of
	a card that reaches the edge (nino-p-0) is cut at the corner of the card and
	not at its own, which is the smaller one, and so are a ground and a picture
	behind the content. clip, not hidden, as for a column	*/
.nino-card {
	margin: 0 0 calc(var(--space-1) * var(--whitespace-scale));
	padding: 0 0 calc(var(--space-1) * var(--whitespace-scale));
	box-sizing: border-box;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: clip;
}
.nino-card--fullwidth, .nino-card--fullwidth:is(.nino-card--alt, .nino-card--tint, .nino-card--dark, .nino-card--black, .nino-card--primary, .nino-card--brand-alt, .nino-card--counter, .nino-card--dim) {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}
/*	A card is a surface of its own, so it takes a solved pair rather than a
	wash: rgba(0,0,0,.05) over the page ground darkened it just enough that
	the ink the Design feature solved against that ground no longer cleared the target,
	and the ink named here belonged to a surface the card was not on. It is
	painted with the ground it names (above) or with the counter ground of
	the one it sits on, and with nothing it works out by looking at that one:
	an alt card in an alt section is alt on alt, and a card that wants to
	stand out of its section says so with counter	*/
.nino-card--alt, .nino-card--tint, .nino-card--dark, .nino-card--black, .nino-card--primary, .nino-card--brand-alt, .nino-card--counter, .nino-card--dim {
	border: 1px solid var(--color-border);
	padding: calc(var(--space-1) * var(--whitespace-scale));
}
.nino-card--borderless { border: 0; background: transparent; box-shadow: none; }
/*	After the borderless card: a card that names a ground is painted with it also
	when it has no border, as the card that stepped out of its section by itself
	always was. The fill is what it stands out with and what its ink was solved
	for; a border is not what it needs. A borderless card of no ground stays
	transparent. The six grounds set the pair above, the counter ground below	*/
.nino-card--alt, .nino-card--tint, .nino-card--dark, .nino-card--black, .nino-card--primary, .nino-card--brand-alt, .nino-card--counter {
	background-color: var(--color-ground);
}
.nino-card--counter {
	--color-ground: var(--counter-card-bg);
	--color-ink: var(--counter-card-text);
	--logo-light: var(--counter-card-logo-light);
	--logo-dark: var(--counter-card-logo-dark);
	--color-title: var(--counter-card-title);
	--color-subtitle: var(--counter-card-text);
	--color-accent: var(--counter-card-accent);
	--color-focus: var(--counter-card-focus);
	--color-border: var(--counter-card-border);
	color: var(--color-ink);
}
/*	A dimmed card is the dark ground whatever else it names, as a dimmed column
	is (.nino-grid--dim): the scrim darkens the picture behind it, so the card
	writes in the ink of the dark ground, hands that ground's roles to what stands
	in it and paints the pair under the picture - a borderless card too, for the
	picture needs a ground under it. This block comes once, after every ground of
	a card, the counter and the borderless card - rules of the same specificity,
	so the last one wins - and a card that says --dim and --alt or --counter is
	not dark ink on a darkened picture. A card holds no card, so it hands no
	counter family on. --color-text is the page's ink also where a rule reads
	that (an icon, a legend). Its border and its padding are those of a card of a
	ground: it is in the list of the rule that gives them, as .nino-grid--dim is
	in the column's, and without them a dimmed card below 768px writes its title
	flush against the edge of the dark card	*/
.nino-card--dim {
	--color-ground: var(--color-section-dark-bg);
	--color-ink: var(--color-section-dark-text);
	--logo-light: var(--color-section-dark-logo-light);
	--logo-dark: var(--color-section-dark-logo-dark);
	--color-title: var(--color-section-dark-text);
	--color-subtitle: var(--color-section-dark-text);
	--color-accent: var(--color-accent-dark);
	--color-focus: var(--color-focus-dark);
	--color-border: var(--color-border-dark);
	--color-text: var(--color-section-dark-text);
	background-color: var(--color-ground);
	color: var(--color-ink);
}

/*	A card that is a link the stretched way (Inclusive Components, "Cards"; the
	stretched link of Bootstrap). The card itself is no <a>: it holds buttons,
	and a link in a link is no markup, which the keyboard and a screen reader
	cannot make sense of. One link in it is stretched over the card by its
	::after, so that the keyboard has one stop with the name of that link, the
	pointer has the whole area, and nothing is drawn twice or added. Which link
	that is, is said by the class nino-stretch on the <a>: a component that says
	stretched in its schema gives the one link it draws that class - the kernel's
	wrapper does for a component the kernel links, the title of a card among
	them, and a feature's template does where the feature draws the <a> itself.
	A list of links is no candidate, so a feature gives the class to a lone link
	and not to the links of its list. With two such links in one card both cover
	it and the later one lies on top: one link per card is meant. The card is the
	box the overlay is placed in and a stacking context of its own, so that what
	is lifted stays in it; the stretched link is the one element that stays where
	it is, since placed itself the overlay would be as large as the link. The
	overlay lies over everything that is not lifted - a picture in a frame that is
	placed itself included - and under whatever else in the card is there to be
	used for its own sake: a button, another link, a field and its label, the
	summary of a disclosure, a frame, a player with controls. Those are lifted
	over it and keep targets of their own, and :where() holds the lift at the
	specificity of one class, so that an element that places itself and says so
	later in this file - the close button of a dialog, the dot of a slider - keeps
	its place. Text in a linked card cannot be selected, and a card with no such
	link shows nothing of it	*/
.nino-card--linked {
	position: relative;
	isolation: isolate;
}
.nino-card--linked a.nino-stretch::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.nino-card--linked :where(a, button, iframe, input, label, select, summary, textarea, [contenteditable], [controls], [tabindex]):where(:not(.nino-stretch)) {
	position: relative;
	z-index: 2;
}
/*	The keyboard has one stop in a linked card, and it shows for the whole card.
	The link is an inline box around a block, the heading, and Chromium draws no
	ring for that in a card, so the ring is the card's, at the edge inside it: that
	is the ground the focus colour of the card was solved against, and no parent
	that clips can cut it off. The generic ring is :where(), so that these two win
	without a word more	*/
.nino-card--linked a.nino-stretch:focus-visible {
	outline: none;
}
.nino-card--linked:has(a.nino-stretch:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
}

/*	A column that is a link the same way, a tile for one: the rules of the linked
	card above, for a column - the one a.nino-stretch in it covers the column,
	every other link, button and field stays above it, and the keyboard's ring
	is drawn on the column. A section of tiles is where the Builder writes it;
	the rules address the class wherever it stands. One linked title per linked
	surface: with two stretched links in one column the later one lies on top	*/
.nino-grid--linked {
	position: relative;
	isolation: isolate;
}
.nino-grid--linked a.nino-stretch::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.nino-grid--linked :where(a, button, iframe, input, label, select, summary, textarea, [contenteditable], [controls], [tabindex]):where(:not(.nino-stretch)) {
	position: relative;
	z-index: 2;
}
.nino-grid--linked a.nino-stretch:focus-visible {
	outline: none;
}
.nino-grid--linked:has(a.nino-stretch:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
}

.nino-card-content {
	padding: calc(var(--space-1) * var(--whitespace-scale)) calc(var(--space-2) * var(--whitespace-scale));
	padding-top: calc(var(--space-1) * var(--whitespace-scale));
	box-sizing: border-box;
}
/*	The block pads the content only where the card does not pad it: a card with
	no padding of its own (nino-p-0), a fullwidth card, whose sides and top are 0,
	and a counter card, whose block stands beside its counter. In every other
	card the padding of the card is the inset of its content, so that a card
	[card] draws stands as it stood before it drew the block. :where() keeps the
	weight at the two classes of the path	*/
.nino-card:where(:not(.nino-p-0, .nino-card--fullwidth, .nino-card--counter)) > .nino-card-content { padding: 0; }

.nino-card-title {
	font-family: var(--fontfamily-title);
	text-transform: var(--font-title-transform);
	color: var(--color-title);
	font-size: calc( var(--font-title-size) * var(--card-title-scale) );
	margin-bottom: calc(var(--space-2) * var(--whitespace-text));
}

.nino-card-subtitle {
	font-family: var(--fontfamily-subtitle);
	font-size: calc( var(--font-subtitle-size) * var(--card-subtitle-scale) );
	font-weight: var(--font-subtitle-weight);
	text-transform: var(--font-subtitle-transform);
	margin-bottom: calc(var(--space-2) * var(--whitespace-text));
}

.nino-card-descr {
	font-size: var(--text-1);
	line-height: var(--line-height);
	margin-bottom: calc(var(--space-2) * var(--whitespace-text));
}

/*	The picture of a card is as wide as the card and never wider: it is the
	<img> [card-image] writes, or the frame it puts round it for a focus, a
	ratio or a class of its own, which carries the class as well and is cropped
	by it. --inline is the other way round - the picture at its own size, capped
	by the width of the card, and it follows the text alignment of the card. It
	sits on the bottom of its line, so the room below it is its margin and not
	the margin and the descender of the line	*/
.nino-card-img {
	height: auto;
	width: 100%;
	max-width: 100%;
	object-fit: cover;
	align-self: stretch;
	margin-bottom: calc(var(--space-1) * var(--whitespace-text));
	border-radius: calc( var(--radius-card) *.7);
}
.nino-card-img--inline {
	display: inline-block;
	width: auto;
	vertical-align: bottom;
}


.nino-card-title--quiet { font-size: calc( var(--font-title-size) * var(--card-title-scale) * var(--scale-quiet) ); opacity: .8; }
.nino-card-title--loud { font-size: calc( var(--font-title-size) * var(--card-title-scale) * var(--scale-loud) ); line-height: calc( var(--font-title-size) * var(--card-title-scale) * var(--scale-loud) *1.3 ); }
.nino-card-subtitle--quiet { font-size: calc( var(--font-subtitle-size) * var(--card-subtitle-scale) * var(--scale-quiet) ); opacity: .7; }
.nino-card-subtitle--loud { font-size: calc( var(--font-subtitle-size) * var(--card-subtitle-scale) * var(--scale-loud) ); }
.nino-card-descr--quiet { font-size: calc( var(--font-text-size) * var(--scale-quiet) ); opacity: .8; }
.nino-card-descr--loud { font-size: calc( var(--font-text-size) * var(--scale-loud) ); line-height: calc( var(--font-text-size) * var(--scale-loud) *1.4 ); }

/*	The colour of a title, a subtitle or a text: one of two inks, and so a role
	and never a colour. muted is the ink the text inherits, at four fifths of its
	strength - currentColor in the color property is the inherited colour, mixed
	with nothing - so that it fades on any ground, a dark or a primary one
	included, where the quiet ink of the ground (--color-subtitle) is the ink
	itself there. It is the colour that fades and not the box, as an opacity would
	have it: what stands in the text with a ground of its own keeps it. A title or
	a subtitle that says muted takes that ink in place of the colour of its own
	role. accent is --color-accent, the brand as ink on that ground.
	There is no light and no dark and no status colour among them: a ground says
	what is light on it, and the word that is white on a dark section is dark on
	the next. After every rule of a title, a subtitle and a text, which set the
	colour of their own at the specificity of one class, so that these are the
	ones that win	*/
.nino-ink--muted { color: color-mix(in srgb, currentColor 80%, transparent); }
.nino-ink--accent { color: var(--color-accent); }

/*	A link in a text is the brand as ink on the ground the text stands on, and is
	underlined where the pointer is over it or the keyboard is on it. The
	kernel's links take the colour of what they stand in and have no underline,
	which is right for a menu, a title or a card and leaves a link in a sentence
	looking like the words round it. The text is what [text] and [card-text]
	draw, whatever their format, size and colour: nino-section-text and
	nino-card-descr. A button in a text keeps its own rules; the titles get
	nothing. :where() leaves the rules the weight of a link, so that a class of
	a link of its own - a button's, a design layer's - wins over them	*/
:where(.nino-section-text, .nino-card-descr) a:where(:not(.nino-btn)) {
	color: var(--color-accent);
}
:where(.nino-section-text, .nino-card-descr) a:where(:not(.nino-btn)):is(:hover, :focus-visible) {
	text-decoration: underline;
}

/*	The cap of the height of a card's picture holds the frame as it holds the
	bare <img>, and the picture in the frame as well: capped itself, the picture
	is cropped at its middle by object-fit, as the bare one is, and the frame is
	as tall as that - and not a frame that is held while the picture in it is
	not, which would cut it off at the bottom	*/
.nino-card-img--maxheight, .nino-image.nino-card-img--maxheight > img {
	max-height: var(--card-img-max-height);
}
.nino-card--fullwidth .nino-card-img {
	border-radius:var(--radius-card) var(--radius-card) 0 0;
}
/* Price display for a .nino-card that presents a product or a service - distinct
   from .nino-pricing-price (used inside .nino-pricing-item, see 05 Helper), for
   when a priced item is presented as a regular card of a grid instead of
   a dedicated pricing table */
.nino-card-price {
	text-align:center;
	font-size: 2rem;
	font-weight: bold;
	color: var(--color-accent);
}

/* Multi-column layout, one breakpoint tier at a time (eg. nino-card-cols-m
   only switches to a row layout from the "m" breakpoint up) */
.nino-card-cols {
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: calc(var(--space-2) * var(--whitespace-scale));
}
.nino-card-cols > .nino-card-img {
	max-height: none;
	max-width: var(--card-img-max-width);
}

@media (min-width: 640px) {
	.nino-card-cols-s { display: flex; flex-direction: row; justify-content: center; column-gap: calc(var(--space-2) * var(--whitespace-scale)); }
	.nino-card-cols-s > .nino-card-img { max-height: none; max-width: var(--card-img-max-width); }
}
@media (min-width: 768px) {
	.nino-card { margin: calc(var(--space-1) * var(--whitespace-scale)); padding: calc(var(--space-1) * var(--whitespace-scale)); }
	/* nino-card adds horizontal margins from here on. Account for those
	   gutters when the card itself is also the grid column, and give back
	   its share of the gap of the row as the width classes do */
	.nino-card--grid.nino-grid-m-25 { width: calc(25% - var(--space-1) * var(--whitespace-scale) - var(--space-1) * var(--whitespace-scale) - .75 * var(--nino-grid-gap, 0px)); --nino-grid-share: .25; }
	.nino-card--grid.nino-grid-m-33 { width: calc((100% / 3) - var(--space-1) * var(--whitespace-scale) - var(--space-1) * var(--whitespace-scale) - var(--nino-grid-gap, 0px) * 2 / 3); --nino-grid-share: calc( 1 / 3 ); }
	.nino-card--grid.nino-grid-m-50 { width: calc(50% - var(--space-1) * var(--whitespace-scale) - var(--space-1) * var(--whitespace-scale) - .5 * var(--nino-grid-gap, 0px)); --nino-grid-share: .5; }
	.nino-card-cols-m { display: flex; flex-direction: row; justify-content: center; column-gap: calc(var(--space-2) * var(--whitespace-scale)); }
	.nino-card-cols-m > .nino-card-img { max-height: none; max-width: var(--card-img-max-width); }
}
@media (min-width: 1024px) {
	.nino-card-cols-l { display: flex; flex-direction: row; justify-content: center; column-gap: calc(var(--space-2) * var(--whitespace-scale)); }
	.nino-card-cols-l > .nino-card-img { max-height: none; max-width: var(--card-img-max-width); }
}
@media (min-width: 1280px) {
	.nino-card { padding: calc(var(--space-2) * var(--whitespace-scale)); }
	.nino-card--wide { padding: calc(var(--space-1) * var(--whitespace-scale)); }
	.nino-card--fullwidth { padding:0; }
	.nino-card--fullwidth .nino-card-content { padding: calc(var(--space-1) * var(--whitespace-scale)) calc(var(--space-2) * var(--whitespace-scale)); }
	.nino-card-cols-xl { display: flex; flex-direction: row; justify-content: center; column-gap: calc(var(--space-2) * var(--whitespace-scale)); }
	.nino-card-cols-xl > .nino-card-img { max-height: none; max-width: var(--card-img-max-width); }
}

/*	A card in the cell of a stack takes no margin of its own: the half gap of the
	cell is the room between neighbours, and the stack's edges are the column's. A
	card's own margins are for a card that stands in a column. The cell is asked
	for in :where(), which counts for nothing, so that the rule is one class heavy
	- as the margins of .nino-card above are, the 768px block among them - and the
	order decides: it wins over them by standing after them, and loses to the
	margin classes at the end of the file by standing before them, so that a card
	in a cell that says nino-mt-2 has that room above it, which is what a column
	of the Builder writes on a component. The card itself stays out of :where():
	with the whole selector in it the rule weighs nothing, and the margin of
	.nino-card wins in the cell again	*/
:where(.nino-stack > *) > .nino-card { margin: 0; }

/*	A card as tall as the column or the cell it stands in, so that the cards of one
	row end on one line. It has no margin at all, or it would not be that box: the
	bottom margin pushes it out of the box by exactly that much, and from 768px,
	where a card has a margin on all four sides, the top one stands it that far
	lower and the sides take it in from the edges - so the rule comes after the
	768px block above. The percentage needs a box with a height to resolve against.
	A plain column is a stretched item of its row and has one. A column with a stack
	class and the slot of a stack are grids that place their content at the start,
	whose row is as tall as that content - and the percentage with it. So the one
	grid that holds a filling card stretches its row: on the grid, because the card
	cannot make the box it fills taller than the box is. A row aligned to the middle
	or the bottom does not stretch its columns, and a card that fills one has
	nothing to fill. nino-autoheight on the cells of a stack makes the slots of
	different rows one height; the card fills its slot, whatever height that is	*/
.nino-card--fill { height: 100%; margin: 0; }
.nino-stack > :has(> .nino-card--fill),
.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)):has(> .nino-card--fill) {
	align-content: stretch;
}

/*	Where the content stands in a card taller than it, which is a flex column's
	to say: in the middle, at the bottom, or - last-bottom - with the last element
	pushed to the bottom by an automatic margin above it, so that a title stays at the
	top and a button ends the card. The pieces of a card have a bottom margin only and
	the global img rule is height: auto, so for them the column changes no spacing and
	no picture. The margins of the items of a flex column do not collapse, though: a
	margin class on a spacer keeps its whole room, and two buttons that stood side by side
	stand one under the other. A flex item is stretched over the column; a button is as
	wide as its label and sits where the text does, as in the stack above.

	A card that [card] draws holds its picture and a div, .nino-card-content, with all
	the rest in it. In the middle and at the bottom it is the group of the two that
	stands there. With last-bottom the div takes the height that is left and is a
	flex column itself, so that it is its last element that is pushed down and
	the picture, above it, stays at the top - the rules for the pieces of a card
	that stand in the card itself go on being what a hand-written card has	*/
.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom {
	display: flex;
	flex-direction: column;
}
.nino-card--middle { justify-content: center; }
.nino-card--bottom { justify-content: flex-end; }
.nino-card--last-bottom > :last-child { margin-top: auto; }
.nino-card--last-bottom > .nino-card-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.nino-card--last-bottom > .nino-card-content > :last-child { margin-top: auto; }
:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom) > .nino-btn,
.nino-card--last-bottom > .nino-card-content > .nino-btn { align-self: flex-start; }
:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-center > .nino-btn,
.nino-card--last-bottom.nino-text-center > .nino-card-content > .nino-btn { align-self: center; }
:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-right > .nino-btn,
.nino-card--last-bottom.nino-text-right > .nino-card-content > .nino-btn { align-self: flex-end; }


/****************************************************************************************************
 *
 *
 *			05 Helper
 *
 *
 *			.nino-icon(--small), .nino-btn(--*),
 *      .nino-form-*, .nino-img-*
 *			.nino-fx(-vertical-bounce)
 *			.nino-badge(--pill, --primary, --success, --error)
 *			.nino-breadcrumbs
 *			.nino-video(--4-3)
 *			.nino-code
 *			.nino-alert(--success, --error, --warning, --info)
 *			.nino-stat-counter, .nino-back-to-top
 *			.nino-pricing-row, .nino-pricing-item(--featured), .nino-pricing-title, .nino-pricing-price
 *			.nino-accordion, .nino-accordion-trigger, .nino-accordion-panel
 *			.nino-pagination
 *			.nino-gallery, .nino-gallery-item(--wide, --tall)
 *			.nino-feature-list, .nino-feature-item
 *			.nino-timeline, .nino-timeline-step, .nino-timeline-number
 *			.nino-video-poster, .nino-video-play
 *			.nino-img-background(--dim), .nino-img-background-content
 *
 *
 ****************************************************************************************************/

/* Icons */
.nino-icon {
	width: 32px;
	height: 32px;
	position: relative;
	top: 2px;
	color: var(--color-text);
}
.nino-section--dark .nino-icon, .nino-section--black .nino-icon {
	fill: var(--color-section-dark-text);
	color: var(--color-section-dark-text);
}
.nino-icon--small {
	width: 16px;
	height: 16px;
}

/* Buttons */
.nino-btn {
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius);
	text-align: center;
	font-family: var(--fontfamily-button);
	font-size: var(--font-button-size);
	font-weight: var(--font-button-weight);
	text-transform: var(--font-button-transform);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nino-btn--light {
	background-color: var(--color-background);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}
.nino-btn--light:hover, .nino-btn--light:focus {
	background-color: var(--color-border);
}
.nino-btn--dark {
	background-color: var(--color-section-dark-bg);
	color: var(--color-section-dark-text);
}
.nino-btn--dark:hover, .nino-btn--dark:focus {
	background-color: var(--color-section-black-bg);
	color: var(--color-section-black-text);
}
/*	The pointer dims the two brand buttons and the focus does not. Opacity takes
	the whole element with it, and the ring of the focus with the rest: at .85
	on white the ring was 2.5:1 where it is solved to 3:1, and 1.6:1 on a hero.
	:where() keeps the specificity of a design layer's own :hover rule, which
	may take the dimming back, and :not(:focus-visible) says that a ring is
	never dimmed - not even when the pointer rests on the button the keyboard
	has focused	*/
.nino-btn--primary {
	background-color: var(--color-primary);
	color: var(--color-primary-text);
	border: 1px solid var(--color-primary);
	transition: opacity .3s;
}
.nino-btn--primary:hover:where(:not(:focus-visible)) {
	background-color: var(--color-primary);
	opacity: .85;
}
.nino-btn--brand-alt {
	background-color: var(--color-brand-alt);
	color: var(--color-brand-alt-text);
	border: 1px solid var(--color-brand-alt);
	transition: opacity .3s;
}
.nino-btn--brand-alt:hover:where(:not(:focus-visible)) {
	background-color: var(--color-brand-alt);
	opacity: .85;
}
.nino-btn--outline {
	background-color: transparent;
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
}
.nino-btn--outline:hover, .nino-btn--outline:focus {
	background-color: var(--color-primary);
	color: var(--color-primary-text);
}
/*	The scaled-down padding put a small button at 22px, just under WCAG 2.2 SC
	2.5.8's 24px, and two of them side by side are too
	close for the spacing exception. inline-flex rather than more padding, so
	the label stays centred in the taller box	*/
.nino-btn--small {
	padding: calc( var(--space-1) *.7) calc( var(--space-2) * .7 );
	font-size: calc( var(--font-button-size) * .7);
	border-radius: calc( var(--radius) * .7 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
}
.nino-btn--big {
	padding: calc( var(--space-1) *1.3) calc( var(--space-2) * 1.3 );
	font-size: calc( var(--font-button-size) * 1.3);
	border-radius: calc( var(--radius) * 1.3 );
}
/*	As wide as the box it stands in. The column of a stack and a flex card
	place a button at the start (above and below), where an item is as wide as
	its label - the width is stated here, so that the placement has nothing to
	shrink, and the label stands in the middle of it	*/
.nino-btn--fullwidth {
	display: block;
	width: 100%;
	text-align: center;
	justify-self: stretch;
	align-self: stretch;
}

/*	One visible focus ring for everything that can take focus, rather than a
	handful of components that each remembered to draw one and everything else
	falling back to the browser's - which a background colour underneath can
	render all but invisible. WCAG 2.2 SC 2.4.7 is AA, and the ring is held to
	SC 1.4.11's 3:1 against whatever ground it lands on.

	:where() so it carries no specificity of its own: a component with a
	better idea overrides it by existing, and this is the floor under
	everything that has not had one.

	:focus-visible rather than :focus, so a pointer click does not leave a
	ring behind on a button somebody already pressed. */
:where(a, area, button, input, label[tabindex], select, summary, textarea, [contenteditable], [tabindex]):focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/*	On a picture the ring gets a second line. --color-focus is solved against a
	ground, and the ground of a cover or a hero is a photograph under a scrim,
	where one colour was 1.6:1. The ink of the surface - the colour its words
	are read in, on that same picture - goes between the button and the ring,
	and one of the two lines shows on any photo	*/
:is(.nino-cover, .nino-parallex, .nino-hero) .nino-btn:focus-visible {
	box-shadow: 0 0 0 2px var(--color-ink);
}

/*	The state that must not look actionable. Colour alone would not say it -
	the cursor and the removed hover response are the other half, since a
	low-contrast label reads as "hard to see" rather than "not offered". */
.nino-btn:disabled,
.nino-btn[aria-disabled="true"] {
	background-color: var(--color-background);
	color: var(--color-disabled);
	border-color: var(--color-border);
	opacity: 1;
	cursor: not-allowed;
	pointer-events: none;
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
	color: var(--color-disabled);
	cursor: not-allowed;
}

/*	Form fields - generic input skin, independent of whatever wires the actual
	submit (see docs/development.md, Forms). The fields, the labels and the
	status line of every form that carries these classes - drawn by a feature
	or written by hand: .nino-form, .nino-form-input, -textarea, -select and
	.nino-form-message - read the custom properties below, and the default of
	each is what the form always looked like, so that a form is drawn as it
	was until a property is moved. The checkbox beside its words and the group
	of radio buttons under one question are .nino-forms-check and
	.nino-forms-group, which a feature that writes a form uses; they read the
	same properties. The send button, the honeypot, the inline form and the
	newsletter's rules are their own, further down: a rule that sets a
	property of a field leaves what theirs set on it, which is more specific.

	The properties are what a design layer moves: a theme sets them on :root,
	where a declaration beats a default here whatever the order of the sheets,
	because a default is declared in :where(), which has no specificity. A
	project restyles a field the same way, without overriding a rule: a
	length, a number or a keyword on :root, a colour as the next paragraph
	says.

	Two places for the defaults. Lengths, numbers and keywords stand in
	:where(:root). A colour the page gives a role - the line, the ink of a
	label, the fill of a field, the colour of its line in focus - stands in
	:where(*), because a custom property is resolved where it is declared: read
	on :root, --color-ground would be the page's on every ground, and a field
	in a dark section would keep a light fill. Such a colour is moved on :root,
	:root *. No colour literal, and no !important.	*/
:where(:root) {

	/*	The size of the text of a field, the padding of a field and the space
		under it, its corners and the weight of its line	*/
	--forms-scale: 1;
	--forms-space: var(--space-1);
	--forms-corners: var(--radius-small);
	--forms-line: 1px;

	/*	Where the label of a field stands: above it, in the row beside it, or
		lifted onto its top edge. --forms-labels is the gap between the two
		columns of a form in rows, the others say what the form and the label
		are then (see the rules below); the middle of each is the plain block
		form, which is no value at all. The cut is what a lifted label is cut
		out of its field with: a colour, or - left initial - the fill of the
		field, which the label reads where it stands. A colour written for it is
		read on :root, the page's on every ground, and on a dark section the
		lifted label would be a light box	*/
	--forms-labels: normal;
	--forms-labels-form: block;
	--forms-labels-cols: none;
	--forms-labels-align: normal;
	--forms-labels-wide: auto;
	--forms-labels-start: auto;
	--forms-labels-block: inline;
	--forms-labels-pos: static;
	--forms-labels-lift: 0em;
	--forms-labels-cut: transparent;

	/*	What a look sets besides: the width of the line of a field at rest and
		in focus, the ring in focus and how far it stands off, the padding of a
		field, the space under a field, a check and a group, the padding and
		the corners of the status line, the case, the tracking and the size of a
		label - which a label that floats takes smaller - and the floor of the
		size of a field	*/
	--forms-width: var(--forms-line);
	--forms-width-focus: var(--forms-width);
	--forms-ring: 2px;
	--forms-ring-offset: 2px;
	--forms-pad: var(--forms-space);
	--forms-gap: var(--forms-space);
	--forms-message-pad: var(--space-1) var(--space-2);
	--forms-message-corners: var(--radius);
	--forms-label-case: none;
	--forms-label-tracking: normal;
	--forms-label-size: calc( 1em - var(--forms-labels-lift) * .25 );
	--forms-floor: 0rem;
}

/*	A field under 1rem makes the browser of a phone zoom into it when it is
	focused. On a pointer the two lower positions of the size are what they
	say; on a touch screen a field is never set smaller	*/
@media (pointer: coarse) {
	:where(:root) {
		--forms-floor: 1rem;
	}
}

/*	The colours, where they are used (see above): the line of a field and the
	ink of a label, the fill of a field at rest and in focus and the colour of
	its line in focus. A field in focus keeps the border it has and paints it
	clear	*/
:where(*) {
	--forms-edge: var(--color-border);
	--forms-label: var(--color-ink);
	--forms-fill: var(--color-ground);
	--forms-fill-focus: var(--forms-fill);
	--forms-edge-focus: transparent;
}

/*	The paddings and the margin of a field give way to the spacing classes
	further down (nino-p-2, nino-pl-3, nino-mb-3 ...): they come last, with the
	specificity of this rule. The line is written by its parts, since a look
	may give each side its own width	*/
.nino-form-input, .nino-form-textarea, .nino-form-select {
	width: 100%;
	padding: var(--forms-pad);
	border-style: solid;
	border-width: var(--forms-width);
	border-color: var(--forms-edge);
	border-radius: var(--forms-corners);
	font-size: max( var(--forms-floor), calc( 1rem * var(--forms-scale) ) );
	box-sizing: border-box;
	background-color: var(--forms-fill);
	color: var(--color-ink);
	transition: border-color .2s ease;
	margin-bottom: var(--forms-gap);
}
/*	The ring of a field in focus, stood off by the floor the rule for every
	:focus-visible gives it, so the offset is set for that state alone	*/
.nino-form-input:focus, .nino-form-textarea:focus, .nino-form-select:focus {
	outline: var(--forms-ring) solid var(--color-focus);
	border-width: var(--forms-width-focus);
	border-color: var(--forms-edge-focus);
	background-color: var(--forms-fill-focus);
}
.nino-form-input:focus-visible, .nino-form-textarea:focus-visible, .nino-form-select:focus-visible {
	outline-offset: var(--forms-ring-offset);
}
/*	What a field shows before anything is written in it is the muted role of the
	ground it stands on, at the strength the role was solved for: the browser's
	own is a fixed grey - 2.4:1 on the dark field of a dark page - and some
	browsers fade it on top. The field takes the ground and the ink of what it
	stands on for the same reason: the role is measured against that ground,
	which a field in the browser's own colours could not promise	*/
.nino-form-input::placeholder, .nino-form-textarea::placeholder {
	color: var(--color-subtitle);
	opacity: 1;
}
/* One-line form - an email field and its button on the same row */
.nino-form--inline { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: flex-start; justify-content: center; }
/* The honeypot Form.php and the newsletter endpoint check: off-screen rather
   than display:none, which some browsers refuse to autofill-skip */
.nino-form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.nino-form-textarea {
	min-height: 6rem;
	resize: vertical;
}
.nino-form-select {
	appearance: none;
	background-repeat: no-repeat;
	background-position: right .5rem center;
	background-size: 1.5rem;
	padding-right: 2.5rem;
}
.nino-form-message {
	font-size: .875rem;
	margin-top: .5rem;
}
/*	The status carries its own surface and the ink solved for it, exactly like
	.nino-alert--error does: --color-error is a background, and used as text on
	the page ground it lands at 2.6:1 on a dark theme. It also says the pair it
	is painted with, as the alert does, so that what is written in it reads
	--color-ground and --color-ink and not those of the section it stands in	*/
.nino-form-message:empty { display: none; }
.nino-form.nino-is-error .nino-form-message,
.nino-form.nino-is-success .nino-form-message {
	padding: var(--forms-message-pad);
	border-radius: var(--forms-message-corners);
}
.nino-form.nino-is-error .nino-form-message {
	background-color: var(--color-error);
	color: var(--color-error-text);
	--color-ground: var(--color-error);
	--color-ink: var(--color-error-text);
	--logo-light: var(--color-error-logo-light);
	--logo-dark: var(--color-error-logo-dark);
}
.nino-form.nino-is-success .nino-form-message {
	background-color: var(--color-success);
	color: var(--color-success-text);
	--color-ground: var(--color-success);
	--color-ink: var(--color-success-text);
	--logo-light: var(--color-success-logo-light);
	--logo-dark: var(--color-success-logo-dark);
}
.nino-form.nino-is-pending .nino-form-submit { opacity: .6; pointer-events: none; }

/* ---- the labels ---- */

/*	The colour, the case and the tracking of a label. Nothing above styles a
	label, so the rule is :where() as well - a rule of the project's own wins,
	whatever its specificity. A legend has the colour of the text of the page,
	which on a dark section is dark text on a dark ground: the legend of a
	group is set below, in the ink of the place it stands. The words of a check
	keep their sentence	*/
:where(.nino-form label:not(.nino-forms-check, .nino-sr-only)) {
	color: var(--forms-label);
	letter-spacing: var(--forms-label-tracking);
	text-transform: var(--forms-label-case);
}

/*	The layout of a form in rows - not the inline one, nor the newsletter's,
	which are flex boxes of their own. In the grid a label and the field after
	it share a row; everything else (a check, the message, the button) takes the
	whole of it - but for the button and a check, which a form of blocks leaves
	as wide as their words and a grid would stretch to the row. The button is
	named by what it is, not by a class: its look stays the page's primary
	button, and only the place it takes in the grid is set. :where() for all of
	it: the middle of every property is what a block form has anyway, and a
	layout of the project's own wins over it	*/
:where(.nino-form:not(.nino-form--inline, .nino-newsletter-inline)) {
	display: var(--forms-labels-form);
	grid-template-columns: var(--forms-labels-cols);
	column-gap: var(--forms-labels);
	align-items: var(--forms-labels-align);
}
:where(.nino-form:not(.nino-form--inline, .nino-newsletter-inline) > :not(
	label:not(.nino-forms-check, .nino-sr-only),
	label:not(.nino-forms-check, .nino-sr-only) + :is(.nino-form-input, .nino-form-select, .nino-form-textarea),
	.nino-form-trap, .nino-sr-only
)) {
	grid-column: var(--forms-labels-wide);
}
:where(.nino-form:not(.nino-form--inline, .nino-newsletter-inline) > :is(button, input[type="submit"], .nino-forms-check)) {
	justify-self: var(--forms-labels-start);
}

/*	The label itself: a block or a line of text, lifted - a negative margin
	under it and a little room each side - onto the top edge of its field, cut
	out of the fill of the field unless the cut says otherwise, and the smaller
	for it	*/
:where(.nino-form:not(.nino-form--inline, .nino-newsletter-inline) > label:not(.nino-forms-check, .nino-sr-only)) {
	display: var(--forms-labels-block);
	position: var(--forms-labels-pos);
	margin: 0 0 calc( var(--forms-labels-lift) * -.55 ) var(--forms-labels-lift);
	padding: 0 calc( var(--forms-labels-lift) / 4 );
	background-color: var(--forms-labels-cut, var(--forms-fill));
	font-size: var(--forms-label-size);
}

/*	A display read from a property is an author rule, and an author rule beats
	the browser's own display: none for the hidden attribute, whatever its
	specificity: the two rules above would show a form or a label that is
	hidden. Said again here, after them, :where() as well, so that it wins over
	them and gives way to a rule of the project's own	*/
:where(.nino-form[hidden], .nino-form > label:not(.nino-forms-check, .nino-sr-only)[hidden]) {
	display: none;
}

/* ---- the checkbox and the radio group ---- */

.nino-forms-check {
	--nino-forms-gap: .5rem;

	display: flex;
	align-items: baseline;
	gap: var(--nino-forms-gap);
	margin: 0 0 var(--forms-gap);
	color: var(--forms-label);
}

/*	The check's own display is a flex box - an author rule as well, which would
	show a check that is hidden - so the attribute says display: none again, at
	the weight of the class and the attribute	*/
.nino-forms-check[hidden] {
	display: none;
}

.nino-forms-check > input {
	flex: 0 0 auto;
}

.nino-forms-group {
	min-width: 0;
	margin: 0 0 var(--forms-gap);
	padding: 0;
	border: 0;
}

.nino-forms-group > legend {
	margin-bottom: var(--space-1);
	color: var(--forms-label);
	font-size: var(--forms-label-size);
	letter-spacing: var(--forms-label-tracking);
	text-transform: var(--forms-label-case);
}

.nino-newsletter-form .nino-form-input {
	max-width:45vw;
	min-width:300px;
}

/* Img tools */
.nino-img-cover {
	position: relative;
}
.nino-img-cover > img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
/* Which part of a cropped image survives the crop - the nine positions a
   picker offers, applied to the image a section frame lays out */
.nino-img-focus--1 > img { object-position: left top; }
.nino-img-focus--2 > img { object-position: center top; }
.nino-img-focus--3 > img { object-position: right top; }
.nino-img-focus--4 > img { object-position: left center; }
.nino-img-focus--5 > img { object-position: center center; }
.nino-img-focus--6 > img { object-position: right center; }
.nino-img-focus--7 > img { object-position: left bottom; }
.nino-img-focus--8 > img { object-position: center bottom; }
.nino-img-focus--9 > img { object-position: right bottom; }
/* The frame [image] and [card-image] put around a picture that has a focus,
   a ratio or a class of its own: the box takes the shape, the picture covers
   it, and nino-img-focus-- above decides which part of it is kept */
.nino-image {
	position: relative;
	overflow: hidden;
}
/* The corners of the frame are the picture's: the frame has the overflow, and
   what it is cut at it cuts the picture at. They are the radius of the image
   kind, --radius-image, which nino-radius and nino-radius-alt on the frame
   change. The frame of the picture of a card, which carries .nino-card-img as
   well, is cut at the card's radius, by the rule of the card */
.nino-image:not(.nino-card-img) {
	border-radius: var(--radius-image);
}
.nino-image > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The ratio of a frame is the ratio of the picture in it as well. The picture
   fills the frame with a height of 100%, which is worked out against the
   height the frame has from its ratio - and an engine that does not work that
   out leaves the picture the ratio it has of its own, in a frame of another:
   a square one in 16 / 9 stands taller than the frame and is cut off at the
   bottom, where object-fit and the focus would have cropped it. So the
   picture says the ratio too, and has it whether or not the percentage is
   resolved; where it is, both agree, and the frame being stretched or held
   short by a box round it, the picture follows the frame as it did */
.nino-image--1-1, .nino-image--1-1 > img { aspect-ratio: 1 / 1; }
.nino-image--4-3, .nino-image--4-3 > img { aspect-ratio: 4 / 3; }
.nino-image--3-2, .nino-image--3-2 > img { aspect-ratio: 3 / 2; }
.nino-image--16-9, .nino-image--16-9 > img { aspect-ratio: 16 / 9; }
.nino-image--21-9, .nino-image--21-9 > img { aspect-ratio: 21 / 9; }
.nino-image--4-1, .nino-image--4-1 > img { aspect-ratio: 4 / 1; }
.nino-image--5-1, .nino-image--5-1 > img { aspect-ratio: 5 / 1; }
/*	The hover of a picture, for the frame that is asked for it: nino-hover on the
	frame - [image /pic class="nino-hover"], [card-image /pic class="nino-hover"]
	- which the class of its own makes, in a card as in [image], so that it has
	one to stand on. A bare <img> has none, as it has none for nino-radius. Under
	the pointer - and under the keyboard where the picture is a link, the <a> that
	[image href] puts round the frame - the frame rises and casts its shadow, and
	the picture in it grows and brightens, each over the same time. The frame has
	the overflow, so what grew stays inside it and inside its corners; a lift and a
	shadow stand outside it, and a card or a column that clips at its edge
	(overflow: clip) cuts them there. The five numbers are custom properties,
	declared on :root beside the viewport animation's, and they are the handles: a
	design layer sets them on main, as it sets that animation's, and a template on
	the frame or on an element round it. Their defaults are a gentle zoom and
	nothing else, and the rules here read them and decide nothing more.

	In a linked card the pointer stands on the overlay of the link of the title and
	never on the frame, so the picture of a linked card follows the card: its hover,
	and the focus of its link.

	A coarse pointer has none of it: a tap leaves the hover where it was, and a
	picture that stays grown after the finger is gone is no effect anybody asked
	for. The rules that give the effect stand in a query that leaves the coarse
	pointer out, and nothing is said for it besides - a none would take from the
	frame, under the tap, the shadow or the place that a design layer gave it at
	rest - so a tap changes nothing. A visitor who asked for less motion has the
	frame keep its place and the picture its size, as the parallax's picture does,
	and the brightness and the shadow, which are no motion, may still change: the
	block after the effect takes back the transform of both, for the fine pointer
	and for none - every pointer but the coarse one, which the effect does not
	reach - in the form the rest of the file gives its queries, a list and no not
	inside a parenthesis, so that no engine drops the block and leaves the motion
	in.

	A frame that rises is a transformed box, and so a stacking context, which is why
	the rules round it were read. A badge placed beside the picture
	(.nino-img-cover > .nino-badge, below) is absolute in its wrapper and not in the
	frame, so it does not move with the frame; and the frame is placed already
	(position: relative), so a transform changes neither the layer it is painted in
	nor its order there: a badge after it in the markup stays over it and one before
	it stays under it, as without the class	*/
.nino-image.nino-hover {
	transition-property: transform, box-shadow;
	transition-duration: var(--image-hover-duration);
}
.nino-image.nino-hover > img {
	transition-property: transform, filter;
	transition-duration: var(--image-hover-duration);
}
@media not all and (pointer: coarse) {
	.nino-image.nino-hover:hover,
	a:focus-visible > .nino-image.nino-hover,
	.nino-card--linked:hover .nino-image.nino-hover,
	.nino-card--linked:has(a.nino-stretch:focus-visible) .nino-image.nino-hover {
		transform: translateY(var(--image-hover-lift));
		box-shadow: var(--image-hover-shadow);
	}
	.nino-image.nino-hover:hover > img,
	a:focus-visible > .nino-image.nino-hover > img,
	.nino-card--linked:hover .nino-image.nino-hover > img,
	.nino-card--linked:has(a.nino-stretch:focus-visible) .nino-image.nino-hover > img {
		transform: scale(var(--image-hover-scale));
		filter: brightness(var(--image-hover-brightness));
	}
}
@media (prefers-reduced-motion: reduce) and (pointer: fine), (prefers-reduced-motion: reduce) and (pointer: none) {
	.nino-image.nino-hover:hover,
	a:focus-visible > .nino-image.nino-hover,
	.nino-card--linked:hover .nino-image.nino-hover,
	.nino-card--linked:has(a.nino-stretch:focus-visible) .nino-image.nino-hover {
		transform: none;
	}
	.nino-image.nino-hover:hover > img,
	a:focus-visible > .nino-image.nino-hover > img,
	.nino-card--linked:hover .nino-image.nino-hover > img,
	.nino-card--linked:has(a.nino-stretch:focus-visible) .nino-image.nino-hover > img {
		transform: none;
	}
}
/* A nino-badge placed as a sibling of the img instead of inside it floats
   free in the top-right corner - eg. "New"/a discount/a category label */
.nino-img-cover > .nino-badge {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
}
/* z-index:0 makes this its own stacking context, so the img/overlay/content
   z-indexes below only ever order against each other - not escape to
   compete with sibling sections. .nino-cover and .nino-parallex further
   down make none; their layers order in the surrounding context instead */
.nino-img-background {
	position: relative;
	z-index: 0;
}
.nino-img-background > img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Animations */
/*	Once: its two bounces are 2.8s of the seven, and a bounce that never ends
	moves on its own for as long as the page is open (SC 2.2.2). A project that
	wants it to go on says animation-iteration-count: infinite	*/
.nino-fx-vertical-bounce {
	animation: nino-fx-vertical-bounce 7s cubic-bezier(1, -0.66, 0.31, 1.68) 1;
}
@keyframes nino-fx-vertical-bounce {
	0%   { transform: translateY(0); }
	10%  { transform: translateY(var(--space-1)); }
	20%  { transform: translateY(0); }
	30%  { transform: translateY(var(--space-1)); }
	40%  { transform: translateY(0); }
}

/* Badge / pill */
.nino-badge {
	display: inline-block;
	padding: .2em .6em;
	border-radius: var(--radius);
	font-size: var(--fontsize-small);
	font-weight: bold;
	line-height: 1.4;
	background-color: var(--color-ground);
	color: var(--color-ink);
	border: 1px solid var(--color-border);
}
.nino-badge--pill { border-radius: 999px; }
.nino-badge--primary { background-color: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); }
/*	A badge that reports a status paints the surface of the status and says so,
	as the alert and the toast of a status do	*/
.nino-badge--success {
	background-color: var(--color-success);
	color: var(--color-success-text);
	border-color: var(--color-success);
	--color-ground: var(--color-success);
	--color-ink: var(--color-success-text);
	--logo-light: var(--color-success-logo-light);
	--logo-dark: var(--color-success-logo-dark);
}
.nino-badge--error {
	background-color: var(--color-error);
	color: var(--color-error-text);
	border-color: var(--color-error);
	--color-ground: var(--color-error);
	--color-ink: var(--color-error-text);
	--logo-light: var(--color-error-logo-light);
	--logo-dark: var(--color-error-logo-dark);
}
.nino-badge-cloud {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1);
}
.nino-badge-cloud--left { justify-content: flex-start; }
.nino-badge-cloud--right { justify-content: flex-end; }

/* Breadcrumbs */
.nino-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fontsize-small);
}
.nino-breadcrumbs li:not(:last-child)::after {
	content: "\203A";
	margin: 0 var(--space-1);
	color: var(--color-border);
}
.nino-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
.nino-breadcrumbs a:hover {
	color: var(--color-accent);
}
.nino-breadcrumbs li:last-child {
	color: var(--color-accent);
	font-weight: bold;
}

/* List variants - plain content lists (Breadcrumbs/Pagination above are
   structural nav lists with their own fixed shape, not content) */
.nino-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
/*	An entry that is nothing but a link is a standalone target, not a link in
	a sentence, so it carries its own 24px rather than relying on the list's
	gap - which is a raster step and gets tighter with the Spacing setting	*/
.nino-list li > a:only-child {
	display: inline-block;
	padding-top: .15rem;
	padding-bottom: .15rem;
}
.nino-list--check li {
	position: relative;
	padding-left: var(--space-3);
}
.nino-list--check li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--color-success);
	font-weight: bold;
}
.nino-list--numbered {
	counter-reset: nino-list-numbered;
}
.nino-list--numbered li {
	counter-increment: nino-list-numbered;
	position: relative;
	min-height: var(--space-3);
	padding-left: var(--space-4);
	display: flex;
	align-items: center;
}
.nino-list--numbered li::before {
	content: counter(nino-list-numbered);
	position: absolute;
	left: 0;
	width: var(--space-3);
	height: var(--space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-primary-text);
	font-size: var(--fontsize-small);
	font-weight: bold;
}
.nino-list--content {
	width: min(100%, 64rem);
	margin-inline: auto;
}
@media (min-width: 768px) {
	.nino-list--columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-4);
		row-gap: var(--space-2);
	}
}

/* Video embed wrapper - responsive iframe/video, default 16:9 */
.nino-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.nino-video--4-3 { aspect-ratio: 4 / 3; }
.nino-video iframe,
.nino-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Code block - preserves authored whitespace and scrolls horizontally rather
   than forcing long lines to widen the page. Add tabindex="0" to a <pre>
   when keyboard users should be able to focus and scroll the block. */
.nino-code {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: var(--space-2);
	overflow: auto;
	border: 1px solid var(--color-code-border);
	border-radius: var(--radius);
	background-color: var(--color-code-bg);
	color: var(--color-code-text);
	font-family: var(--fontfamily-code);
	font-size: var(--font-code-size);
	font-weight: var(--font-code-weight);
	text-transform: var(--font-code-transform);
	line-height: 1.65;
	tab-size: 2;
	text-align: left;
	white-space: pre;
	-webkit-overflow-scrolling: touch;
}
.nino-code code {
	display: block;
	min-width: max-content;
	color: inherit;
	background: none;
	font: inherit;
	white-space: inherit;
}
.nino-code:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* Alert / inline feedback (static - form-specific feedback is .nino-form-message) */
/*	Paints the page ground wherever it is dropped, so it restores that
	ground's ink roles too - inside a dark section the -info variant would
	otherwise take that section's accent onto its own light box - and says
	which pair it is painted with	*/
.nino-alert {
	padding: var(--space-2);
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	background-color: var(--color-background);
	color: var(--color-text);
	--color-ground: var(--color-background);
	--color-ink: var(--color-text);
	--logo-light: var(--color-logo-light);
	--logo-dark: var(--color-logo-dark);
	--color-title: var(--color-title-default);
	--color-accent: var(--color-accent-default);
}
/*	A status is a surface with ink of its own, and says so: the three paint the
	pair of their role and not the page's that .nino-alert set	*/
.nino-alert--success {
	background-color: var(--color-success);
	border-color: var(--color-success);
	color: var(--color-success-text);
	--color-ground: var(--color-success);
	--color-ink: var(--color-success-text);
	--logo-light: var(--color-success-logo-light);
	--logo-dark: var(--color-success-logo-dark);
}
.nino-alert--error {
	background-color: var(--color-error);
	border-color: var(--color-error);
	color: var(--color-error-text);
	--color-ground: var(--color-error);
	--color-ink: var(--color-error-text);
	--logo-light: var(--color-error-logo-light);
	--logo-dark: var(--color-error-logo-dark);
}
.nino-alert--warning {
	background-color: var(--color-warning);
	border-color: var(--color-warning);
	color: var(--color-warning-text);
	--color-ground: var(--color-warning);
	--color-ink: var(--color-warning-text);
	--logo-light: var(--color-warning-logo-light);
	--logo-dark: var(--color-warning-logo-dark);
}
.nino-alert--info { border-color: var(--color-accent); color: var(--color-accent); }
/*	The large variant takes the large radius: a box at three times the padding
	keeps the same corner as a badge otherwise, which is what --radius-large
	is for */
.nino-alert--content {
	padding: var(--space-3);
	border-radius: var(--radius-large);
	font-size: var(--fontsize-big);
}

/* Stat counter - see Nino.ui.js for the count-up behavior */
.nino-stat-counter {
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--color-accent);
	margin-top:var(--space-1);
}

/* Back-to-top button - visibility driven by body.nino-scroll-atf/-btf, see Nino.ui.js */
.nino-back-to-top {
	position: fixed;
	right: var(--space-2);
	bottom: var(--space-2);
	z-index: 997;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity .3s, transform .3s;
}
body.nino-scroll-btf .nino-back-to-top {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* Table - .nino-table-wrap scrolls horizontally on narrow viewports instead
   of letting a wide table force the whole page wide (same reasoning as the
   grid: never trust a fixed-width content block on mobile) */
.nino-table-wrap {
	width: 100%;
	overflow-x: auto;
}
.nino-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
.nino-table th,
.nino-table td {
	padding: var(--space-1) var(--space-2);
	border-bottom: 1px solid var(--color-border);
}
.nino-table th {
	font-size: var(--fontsize-small);
	text-transform: uppercase;
	color: inherit;
}
.nino-table--striped tbody tr:nth-child(even) {
	background-color: var(--color-section-alt-bg);
	color: var(--color-section-alt-text);
	--color-ground: var(--color-section-alt-bg);
	--color-ink: var(--color-section-alt-text);
	--logo-light: var(--color-section-alt-logo-light);
	--logo-dark: var(--color-section-alt-logo-dark);
	--color-title: var(--color-section-alt-text);
	--color-accent: var(--color-accent-alt);
}
.nino-table--bordered th,
.nino-table--bordered td {
	border: 1px solid var(--color-border);
}
/* What the cells of a [table] set apart: the alignment of a column and the
   thumbnail of an image field */
.nino-table__cell--right {
	text-align: right;
}
.nino-table__cell--center {
	text-align: center;
}
.nino-table__img {
	width: 6rem;
	height: auto;
}

/* Pricing table - card per pricelist entry (via the "elements" shortcode) */
.nino-pricing-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
/* nino-pricing-item flexes from a 240px basis, so "exactly four per line" needs
   a basis of its own - below the medium breakpoint the cards keep wrapping */
@media (min-width: 768px) {
	.nino-pricing-row--four > .nino-pricing-item { flex: 1 1 calc(25% - (var(--space-2) * 3 / 4)); }
	.nino-pricing-row--four-first > .nino-pricing-item:first-child,
	.nino-pricing-row--four-last > .nino-pricing-item:last-child {
		flex: 1 1 100%;
		border-color: var(--color-secondary);
		border-width: 2px;
	}
}
.nino-pricing-item {
	flex: 1 1 240px;
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	text-align: center;
}
.nino-pricing-item--featured {
	border-color: var(--color-secondary);
	border-width: 2px;
}
.nino-pricing-row--feature-middle > .nino-pricing-item:nth-child(2) {
	border-color: var(--color-primary);
	border-width: 2px;
	box-shadow: 0 .75rem 2rem rgba(0,0,0,.1);
}
.nino-pricing-title {
	font-size: 1.125rem;
	margin-bottom: var(--space-1);
}
.nino-pricing-price {
	font-size: 2rem;
	font-weight: bold;
	color: var(--color-accent);
}
.nino-pricing-title--quiet { font-size: var(--text-1); opacity: .8; }
.nino-pricing-title--loud { font-size: var(--text-4); }
.nino-pricing-price--quiet { font-size: var(--text-4); opacity: .8; }
.nino-pricing-price--loud { font-size: var(--text-6); }
.nino-pricing-item--featured .nino-pricing-title {
	font-size: 1.8rem;
	margin-bottom: var(--space-1);
}
.nino-pricing-item--featured .nino-pricing-price {
	font-size: 2.8rem;
	color: var(--color-accent);
}
.nino-pricing-row--feature-middle > .nino-pricing-item:nth-child(2) .nino-pricing-title {
	font-size: 1.8rem;
}
.nino-pricing-row--feature-middle > .nino-pricing-item:nth-child(2) .nino-pricing-price {
	font-size: 2.8rem;
}
.nino-pricing-features {
	margin: var(--space-2) 0;
}

/* Accordion - plain <details>/<summary>, no JS needed. Multiple <details>
   sharing the same name="..." attribute behave as an exclusive group
   natively in current browsers (older browsers just allow several open
   at once - harmless fallback) */
.nino-accordion {
	border-bottom: 1px solid var(--color-border);
}
.nino-accordion-trigger {
	padding: var(--space-2) 0;
	cursor: pointer;
	font-weight: bold;
	list-style: none;
}
.nino-accordion-trigger::-webkit-details-marker {
	display: none;
}
.nino-accordion-trigger::before {
	content: "+";
	display: inline-block;
	width: 1em;
	color: var(--color-accent);
}
.nino-accordion[open] > .nino-accordion-trigger::before {
	content: "\2212";
}
.nino-accordion-panel {
	padding: 0 0 var(--space-2) 1em;
	transition: opacity .2s ease, transform .2s ease;
}
.nino-accordion[open] > .nino-accordion-panel {
	transform: translateY(0);
}
/* Fades the panel in as it's revealed - degrades gracefully (instant show)
   in browsers without @starting-style support */
@starting-style {
	.nino-accordion[open] > .nino-accordion-panel {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/* Pagination */
.nino-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nino-pagination a {
	display: inline-block;
	min-width: 2rem;
	padding: var(--space-1);
	text-align: center;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radius);
}
.nino-pagination a:hover {
	background-color: var(--color-border);
}
.nino-pagination li.nino-is-active a {
	background-color: var(--color-primary);
	color: var(--color-primary-text);
}


/* Gallery/Mosaic grid - fixed row height, items span extra columns/rows
   via --wide/--tall to break up the grid */
.nino-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 160px;
	gap: var(--space-1);
	max-width: var(--grid-max-width);
	margin: 0 auto;
	padding: 0 var(--space-1);
	box-sizing: border-box;
}
.nino-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
}
.nino-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.nino-gallery-item:hover img {
	transform: scale(1.05);
}
/* A gallery item's img optionally sits inside a nino-modal-trigger button
   instead of being a plain, non-interactive tile - reset the button back to
   filling the grid cell exactly like the plain-img case did */
.nino-gallery-item button {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
}
.nino-gallery-item--wide {
	grid-column: span 2;
}
.nino-gallery--mosaic > .nino-gallery-item:nth-child(6n + 1) {
	grid-column: span 2;
}
@media (min-width: 768px) {
	.nino-gallery {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 200px;
	}
	.nino-gallery-item--tall {
		grid-row: span 2;
	}
	.nino-gallery--mosaic > .nino-gallery-item:nth-child(6n + 1) {
		grid-row: span 2;
	}
	.nino-gallery--mosaic > .nino-gallery-item:nth-child(6n + 4) {
		grid-column: span 2;
	}
}

/* Modern asymmetric feature grid. The repeating content remains a normal
   Elements collection; visual rhythm comes from the reusable container. */
.nino-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
}
.nino-bento-item {
	min-height: 100%;
}
@media (min-width: 768px) {
	.nino-bento {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.nino-bento-item {
		grid-column: span 3;
	}
	.nino-bento-item:nth-child(6n + 1),
	.nino-bento-item:nth-child(6n + 4) {
		grid-column: span 4;
	}
	.nino-bento-item:nth-child(6n + 2),
	.nino-bento-item:nth-child(6n + 3) {
		grid-column: span 2;
	}
}

.nino-testimonial-author {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-2);
	text-align: left;
}
.nino-testimonial-author img {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
}
.nino-testimonial-author span,
.nino-testimonial-author small {
	display: block;
}
.nino-profile-image {
	width: min(16rem, 42vw);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.nino-profile-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
}
.nino-contact-details {
	display: grid;
	gap: var(--space-1);
	margin-top: var(--space-2);
	font-style: normal;
}
.nino-newsletter-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-1);
}
.nino-newsletter-inline .nino-form-input {
	flex: 1 1 16rem;
	margin: 0;
}

/* Feature-Split - icon + heading + text rows, paired with an image
   column via the regular nino-grid-row/nino-grid-m-50 pattern */
.nino-feature-list {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: 0;
}
.nino-feature-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}
.nino-feature-item:not(:last-child) {
	margin-bottom: var(--space-3);
}
.nino-feature-item .nino-icon {
	flex-shrink: 0;
	top: 0;
}

/* Process timeline - numbered steps, connected by a horizontal line on
   "m" and up, stacked without the line on mobile */
.nino-timeline {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* --counted draws the step number from the list instead of the markup: an <ol>
   is numbered by nature, so the badge is decoration. ::before is the connecting
   line, so the badge is ::after, pulled in front with order */
.nino-timeline--counted { counter-reset: nino-timeline-step; }
.nino-timeline--counted > .nino-timeline-step { display: flex; flex-direction: column; counter-increment: nino-timeline-step; }
.nino-timeline--counted > .nino-timeline-step::after {
	content: counter(nino-timeline-step);
	position: relative;
	z-index: 1;
	order: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto var(--space-2);
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-primary-text);
	font-weight: 700;
}
/* --stacked reads top to bottom, left aligned and without the connecting line */
.nino-timeline--stacked { flex-direction: column; }
.nino-timeline--stacked > .nino-timeline-step { flex: 1 1 auto; margin-bottom: var(--space-3); padding: 0; text-align: left; align-items: flex-start; }
.nino-timeline--stacked > .nino-timeline-step:last-child { margin-bottom: 0; }
.nino-timeline--stacked > .nino-timeline-step > .nino-timeline-number { margin-left: 0; }
.nino-timeline--stacked > .nino-timeline-step::after { margin-left: 0; }
.nino-timeline--stacked > .nino-timeline-step::before { display: none; }
.nino-timeline-step {
	position: relative;
	flex: 1 1 100%;
	text-align: center;
	padding: 0 var(--space-2);
	margin-bottom: var(--space-3);
	box-sizing: border-box;
}
.nino-timeline-number {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto var(--space-2);
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-primary-text);
	font-weight: 700;
}
@media (min-width: 768px) {
	.nino-timeline-step {
		flex: 1 1 0;
		margin-bottom: 0;
	}
	.nino-timeline-step::before {
		content: '';
		position: absolute;
		top: 20px;
		left: -50%;
		width: 100%;
		height: 2px;
		background-color: var(--color-border);
	}
	.nino-timeline-step:first-child::before {
		display: none;
	}
}

/* Video poster - static image standing in for a video's first frame,
   opens the actual embed in a nino-modal--lightbox (see 08) on click */
.nino-video-poster {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}
.nino-video-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nino-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	color: #fff;
	transform: translate(-50%,-50%);
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
	transition: transform .2s ease;
}
.nino-video-poster:hover .nino-video-play {
	transform: translate(-50%,-50%) scale(1.1);
}

/* Full-bleed background image with a dark scrim for text contrast -
   static (no JS), unlike nino-cover/nino-parallex which are JS-sized */
/*	Same scrim, same consequence as .nino-cover--dim: what is laid over the
	dimmed picture has to be given the dark ground's ink, or it keeps the
	page's	*/
.nino-img-background--dim {
	color: var(--color-section-black-text);
	--color-ground: var(--color-section-black-bg);
	--color-ink: var(--color-section-black-text);
	--logo-light: var(--color-section-black-logo-light);
	--logo-dark: var(--color-section-black-logo-dark);
	--color-title: var(--color-section-black-text);
	--color-subtitle: var(--color-section-black-text);
	--color-text: var(--color-section-black-text);
	--color-accent: var(--color-accent-black);
}
.nino-img-background--dim::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--color-background-dim);
}
.nino-img-background-content {
	position: relative;
	z-index: 3;
}


/****************************************************************************************************
 *
 *
 *			06 Shortcode: Navigation
 *
 *
 *			Styles the [navigation] shortcode's own markup
 *			(Navigation::doShortcode() in _nino/Nino/Modules/Navigation/Navigation.php)
 *
 *
 ****************************************************************************************************/

.nino-nav-burger {
	position: relative;
}
/*	The button that opens the list is a real one: the Tab key reaches it, Enter
	and Space press it, and it says what it is and whether the list is open
	(aria-expanded, which Nino.ui.js keeps). It stands above the overlay, its
	ring included - the ring is the one every control has, and the overlay
	paints over whatever is below it. The markup carries it hidden: it is the
	script that shows it, and without the script there is nothing to open the
	list with, so the list stays open (see further down)	*/
.nino-nav-burger > button {
	position: relative;
	z-index: 101;
	display: flex;
	align-items: center;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.nino-nav-burger > button[hidden] {
	display: none;
}
.nino-nav-burger svg {
	width: 32px;
	height: 32px;
	transition: transform .3s;
	fill: var(--color-title);
}
/*	Folded away the list is invisible, and not only squeezed to no height: a
	link that nobody can see is still a stop of the Tab key, and the focus
	ended up in a box of the height 0. It is hidden when the fold has finished
	and visible at once when it opens, which is why the visibility has a delay
	on its way out and none on its way in	*/
.nino-nav-burger .nino-nav-content {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	background-color: var(--color-background);
	transition: max-height .4s, visibility 0s .4s;
	z-index: 100;
}
.nino-nav-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nino-nav-burger .nino-nav-content > div {
	display:none;
}

/*	While a menu is open - any burger whose button says aria-expanded - the document stays where it is, so the header keeps the button that closes
	the menu and the page is where it was when the menu closes. The overlay
	scrolls by itself when its list is longer than the window	*/
html:has(.nino-nav-burger > button[aria-expanded="true"]) {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/*	Open, the overlay paints the page ground over whatever the header frame
	paints, so it restores that ground's ink and roles with it - a frame
	drawing its bar on the deepest surface otherwise handed its own white ink
	down into this one. Closed, the same element is the inline nav on a wide
	screen and has to keep inheriting the bar's	*/
.nino-nav-burger > button[aria-expanded="true"] ~ .nino-nav-content {
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: visible;
	transition: max-height .4s;
	color: var(--color-text);
	--color-ground: var(--color-background);
	--color-ink: var(--color-text);
	--logo-light: var(--color-logo-light);
	--logo-dark: var(--color-logo-dark);
	--color-title: var(--color-title-default);
	--color-accent: var(--color-accent-default);
}
.nino-nav-burger > button[aria-expanded="true"] ~ .nino-nav-content > div {
	display:block;
}
.nino-nav-burger > button[aria-expanded="true"] svg {
	transform: rotate(90deg);
}
.nino-nav-burger > button[aria-expanded="true"] ~ .nino-nav-bg {
	position: fixed;
	inset: 0;
	z-index: 99;
}
/* The open overlay always sits on a plain --color-background surface (see
   .nino-nav-burger .nino-nav-content's own background-color above), regardless
   of what color the theme gives the header itself (often dark/semi-
   transparent) - so its links need the page's normal text color, not
   whatever a theme sets for header links */
.nino-nav-burger > button[aria-expanded="true"] ~ .nino-nav-content li a {
	color: var(--color-text);
}
.nino-nav-burger > button[aria-expanded="true"] ~ .nino-nav-content li a.nino-is-active {
	color: var(--color-accent);
}

/* Only the burger variant is a fullscreen overlay (see 'nav-burger' in
   Navigation::$html) - it needs top padding to clear the fixed header once
   opened. The 'nav-regular' variant (eg. the footer's nav lists) renders
   inline, so it must not inherit that offset. */
.nino-nav-burger .nino-nav-content ul {
	padding: var(--space-2);
}
header .nino-nav-content li a {
	display: block;
	padding: var(--space-1) 0;
	font-size: 1.4rem;
	border-bottom: 1px solid var(--color-border);
}
header .nino-headernav-logo {
	width:50%;
	margin:var(--space-3) auto 0;
}
header .nino-headernav-logo img {
	width:100%;
	height:auto;
}
/* no logo uploaded: the wrapper is empty, and takes no room */
header .nino-headernav-logo:empty {
	display:none;
}

/*	Without the script the button stays hidden, and a list that is folded away
	has nothing to unfold it: it is the list it is from 768px on, in the bar
	and not an overlay. The clipping goes with the fold: it is what the fold
	needs and a row that is open does not, and it cut the ring of the focus of
	a link at the top, at the bottom and at both ends of the row	*/
.nino-nav-burger > button[hidden] ~ .nino-nav-content {
	position: static;
	max-height: none;
	overflow: visible;
	visibility: visible;
	background-color: transparent;
}

@media (min-width: 768px) {
	.nino-nav-burger > button {
		display: none;
	}
	.nino-nav-burger .nino-nav-content {
		position: static;
		max-height: none;
		overflow: visible;
		visibility: visible;
		background-color: transparent;
	}
	/*	The row wraps: with ten links it ran out of the bar on the right, where
		the header clips it and the links that were cut off stayed stops of the Tab
		key. The second row has the gap of the first - the header is as tall as its
		content, so it grows, up to the half of the window that .nino-scroll-header
		allows it - 200px in a window that is lower than 400px - and the page below
		keeps clear of it by --nino-header-grow	*/
	.nino-nav-content ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}
	.nino-nav-burger .nino-nav-content ul {
		padding: 0;
	}
	header .nino-nav-content li a {
		border: none;
		padding: 0;
		font-size: 1rem;
	}
}


/****************************************************************************************************
 *
 *
 *			07 Shortcode: Localepicker
 *
 *
 *			Styles the [localepicker] shortcode's own markup
 *			(Localepicker::doShortcode() in _nino/Nino/Modules/Localepicker/Localepicker.php)
 *
 *
 ****************************************************************************************************/

.nino-localepicker-wrap {
	display:inline-block;
	position:relative;
	text-align:center;
}
.nino-localepicker-wrap div {
	display:inline-block;
}

.nino-localepicker-wrap svg {
	width:16px;
	height:16px;
	margin-right:var(--space-1);
	position:relative;
	top:3px;
}
.nino-localepicker-wrap input {
	/* Not display:none: a control that is not rendered cannot be focused, and
	   the list behind it was out of reach of a keyboard - every language
	   but the one the page is in. Out of sight, still there.

	   Its box is the control's and the ring's - the wrap, and the 4px of
	   offset and outline round it, see below - and not one pixel at the top
	   of it. What the browser brings into view when the Tab key arrives is
	   the box of the element that has the focus: one pixel was in view as
	   soon as the row it stands in was at the edge of the screen, nothing
	   scrolled, and the globe, the name and the ring stayed below it */
	position:absolute;
	top:-4px;
	left:-4px;
	width:calc(100% + 8px);
	height:calc(100% + 8px);
	margin:0;
	padding:0;
	opacity:0;
	pointer-events:none;
}
/* ...and the globe and the name beside it say when the control has the
   focus, since the control itself has nothing left to show it with */
.nino-localepicker-wrap:has(input:focus-visible) {
	outline:2px solid var(--color-focus);
	outline-offset:2px;
}
/*	The picker is mounted in a footer band by some frames and in the header by
	others, so it takes the ink of wherever it is rather than the footer's	*/
.nino-localepicker-wrap p,
.nino-localepicker-wrap li {
	display:none;
	color:inherit;
	cursor:pointer;
}
/*	The title of the open list is no heading - the picker has no place in the
	outline of a page - and keeps the face of the h6 it was: the size an h6 has
	of its own and the weight and the transform of the title role	*/
.nino-localepicker-wrap p {
	font-size:.67em;
	font-weight:var(--font-title-weight);
	text-transform:var(--font-title-transform);
}

.nino-localepicker-wrap ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.nino-localepicker-wrap li.nino-is-active {
	display:block;
}

.nino-localepicker-wrap a {
	text-decoration:none;
	color:inherit;
}

.nino-localepicker-wrap input:checked + div {
	display:block;
	color:var(--color-text);
	--color-ground: var(--color-background);
	--color-ink: var(--color-text);
	--logo-light: var(--color-logo-light);
	--logo-dark: var(--color-logo-dark);
	--color-title: var(--color-title-default);
	--color-accent: var(--color-accent-default);
	position:fixed;
	text-indent: 0;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:999;
	background-color:var(--color-background);
	border:1px solid var(--color-border);
	transition:all .5s;
}
.nino-localepicker-wrap input:checked ~ div p {
	display:block;
	text-align:center;
	padding:.5rem;
}
.nino-localepicker-wrap input:checked ~ div li {
	display:block;
	border-top:1px solid var(--color-border);
}
.nino-localepicker-wrap input:checked + div li :is(a, span) {
	color:var(--color-text);
	font-size:1.2rem;
	padding:1rem 0;
	text-align:center;
	display:block;
	transition:color .3s;
}

.nino-localepicker-wrap input:checked + div li a:hover {
	color:var(--color-accent);
}
.nino-localepicker-wrap input:checked + div li.nino-is-active span {
	cursor:default;
}
.nino-localepicker-wrap input:checked + div li.nino-is-active {
	font-weight:bold;
}

@media(min-width:768px) {
	.nino-localepicker-wrap input:checked + div {
		top:25%;
		left:25%;
		right:25%;
		bottom:auto;
		padding:var(--space-1);
	}
	.nino-localepicker-wrap div.nino-localepicker-bg {
		opacity:0;
		transition:opacity .4s;
	}

	.nino-localepicker-wrap input:checked ~ div li {
		border-bottom:none;
	}
	.nino-localepicker-wrap input:checked ~ div.nino-localepicker-bg {
		z-index:998;
		opacity:1;
		display:block;
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background-color:var(--color-background-dim);
	}
}

/****************************************************************************************************
 *
 *
 *			08 Javascript Elements
 *
 *
 *			Ensure Nino.ui.js functionality.
 *
 *			.nino-parallex(--dim), .nino-cover(--dim), .nino-section-bg, .nino-grid-bg, .nino-slider, .nino-vpa, .nino-preloader
 *			.nino-tabs-nav, .nino-tabs-tab, .nino-tabs-panel
 *			.nino-filter-nav, .nino-filter-btn, .nino-filter-count
 *			.nino-modal(--lightbox, --video), .nino-modal-close
 *			.nino-toast-container, .nino-toast(--success, --error)
 *
 *
 ****************************************************************************************************/


/* Cover / Parallax - two shapes. A cover, and a parallax that is a cover as
   well (it says nino-cover and a data-cover-height), has the height the JS
   gives it (see Nino.ui.js) and its content placed over it: this provides the
   structural CSS that behavior depends on. A parallax that is no cover has no
   height but the 60vh it asks for, and the JS sizes covers only: it sizes
   itself to what it holds, its row stands in the flow and grows it (see
   "A parallax that is no cover", below) */
.nino-parallex,
.nino-cover {
	position: relative;
	overflow: hidden;
}
.nino-parallex {
	min-height: 60vh;
}
/*	A fullscreen hero that is a parallax is a screen high: the rule of the hero
	comes earlier in the file and would lose to the minimum above	*/
.nino-parallex.nino-hero--fullscreen {
	min-height: 100vh;
}
.nino-parallex > img,
.nino-cover > img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	will-change: transform;
}
.nino-parallex > img {
	height: 180%;
}
/* Optional dark scrim for text-on-photo contrast - z-index sits between
   the image (1) and the content (101). The cover sets no z-index of its own
   and so makes no stacking context: all three order in the surrounding one,
   where the content's 101 stays under the fixed header (998) */
.nino-parallex--dim::before,
.nino-cover--dim::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 50;
	background-color: var(--color-background-dim);
}
/*	Pinned to both edges rather than sized at width:100%: an absolutely
	positioned box measures that 100% against the padding box but starts at its
	static position *inside* the padding, so the content hung over the right
	edge by exactly the section's left padding and was clipped there by
	.nino-cover's own overflow:hidden. Inheriting the horizontal padding keeps
	the cover's content on the same inset as every other section's. It is
	centred by translate and not by transform, as the row of a cover is (see
	below), so that a viewport animation on it composes with the centring	*/
.nino-parallex > .nino-cover-content,
.nino-cover > .nino-cover-content {
	position: absolute;
	padding-top:var(--space-3);
	padding-left: inherit;
	padding-right: inherit;
	box-sizing: border-box;
	z-index: 101;
	top: 50%;
	left: 0;
	right: 0;
	width: auto;
	translate: 0 -50%;
}
/*	The box already spans both edges, so centring is the text's alignment and
	nothing else - the left:50% + translateX(-50%) pair this used to carry was
	compensating for the static-position offset fixed above	*/
.nino-parallex.nino-cover-center > .nino-cover-content,
.nino-cover.nino-cover-center > .nino-cover-content {
	text-align: center;
}
.nino-parallex.nino-cover-top > .nino-cover-content,
.nino-cover.nino-cover-top > .nino-cover-content { top: 0; translate: none; }
.nino-parallex.nino-cover-bottom > .nino-cover-content,
.nino-cover.nino-cover-bottom > .nino-cover-content { top: auto; bottom: 0; translate: none; }
.nino-parallex.nino-hero,
.nino-cover.nino-hero {
	margin-top: 0 !important;
	box-sizing: border-box;
}

/*	The picture behind a section, in a block of its own that the section's
	content follows - what a section the Builder writes has instead of an
	image directly in the cover. It lies over the whole section and is cut at
	its edges, the picture covers it, and the content stands above it (and
	above the scrim of a --dim cover, which sits at 50). Every section is the
	box the picture is placed in (see .nino-section), a cover and a parallax
	as much as a plain one. In a cover or a parallax the content is laid out
	the way .nino-cover-content is: over the middle, or the top or the bottom
	where the section says so - with or without a picture in front of it: the
	cover is the section's height, not the picture's. The row is a direct child
	of the section either way, which no hand-written cover has: its row stands
	in .nino-cover-content	*/
.nino-section-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
}
.nino-section-bg > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nino-section-bg + .nino-grid-row {
	position: relative;
	z-index: 101;
}
/*	The scrim of a plain section with a picture behind it, which has no cover
	to draw one with: the block of the picture draws it over the picture, at
	the size of the block, as the block of a column does. The row stands above
	it, and the ink of the section is the dimmed cover's (see .nino-cover--dim)	*/
.nino-section--dim > .nino-section-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-background-dim);
}
/*	A section with a picture behind it that is taller than what it holds - a
	height of its own, a hero that is a screen high - keeps its row in the
	middle of it, as a cover does, and not at its top where the flow puts it.
	The row is the one item that is in the flow, so the section lays it out;
	nino-cover-top and nino-cover-bottom keep it at the top or at the bottom
	as they do for a cover, which has its row laid out by the rules above	*/
.nino-section:not(.nino-cover, .nino-parallex):has(> .nino-section-bg) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.nino-section:not(.nino-cover, .nino-parallex):has(> .nino-section-bg).nino-cover-top { justify-content: flex-start; }
.nino-section:not(.nino-cover, .nino-parallex):has(> .nino-section-bg).nino-cover-bottom { justify-content: flex-end; }
/*	The row of a cover is centred by translate and not by transform. The viewport
	animation of the row - the nino-vpa classes the Builder writes on it - is a
	transform of the same element, and of two rules for one property one wins:
	in the standard mode the row stayed centred and did not slide in, in the
	repeat mode it stood half its own height too low, since the animation ends
	at translateY(0). translate composes with transform, so the centring and
	the animation each have a property of their own, and the rules that put the
	row at the top or at the bottom take the centring back with translate: none	*/
.nino-parallex > .nino-grid-row,
.nino-cover > .nino-grid-row {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 101;
	translate: 0 -50%;
}
.nino-parallex.nino-cover-top > .nino-grid-row,
.nino-cover.nino-cover-top > .nino-grid-row { top: 0; translate: none; }
.nino-parallex.nino-cover-bottom > .nino-grid-row,
.nino-cover.nino-cover-bottom > .nino-grid-row { top: auto; bottom: 0; translate: none; }
/*	The row of a cover has what .nino-cover-content has in a hand-written one:
	the air above its content, a step of the space scale, and from 768px the
	side padding of the section, which a placed box does not stand in. Its left
	and its right are that padding - the space step times the whitespace - and
	its width is what they leave, not the 100% every row says, which a placed
	box measures against the padding box and which would hang over the right
	edge by the left one. A side keeps the edge it had where the section says
	nino-pl-0 or nino-pr-0 and where the row does, and so does a row with no
	maximum width, nino-grid-row--full; the padded cover has its offsets from
	--cover-padding-x (below). A row that paints a ground - the colour round its
	columns, or a picture behind them (chapter 04) - has the room above and
	below of its own, the space step times the whitespace, and keeps it: the air,
	a step that the whitespace does not move, would replace its top and leave
	the other three sides to follow the whitespace alone. The air leaves out what
	the rule of those grounds lists, and all of it but the row's own class is
	asked for in :where(), so that the rule is one class heavy, as the base rule
	of the row and the padding classes at the end of the file are, and the order
	decides: a nino-pt-<n> on the row says what it says	*/
:where(.nino-parallex, .nino-cover) > .nino-grid-row:where(:not(.nino-grid-row--alt, .nino-grid-row--tint, .nino-grid-row--dark, .nino-grid-row--black, .nino-grid-row--primary, .nino-grid-row--brand-alt, .nino-grid-row--counter, .nino-grid-row--dim):not(:has(> .nino-grid-row-bg))) {
	padding-top: var(--space-3);
}
@media (min-width: 768px) {
	.nino-cover > .nino-grid-row {
		width: auto;
	}
	.nino-cover:not(.nino-cover--padded, .nino-pl-0) > .nino-grid-row:not(.nino-pl-0, .nino-grid-row--full) {
		left: calc(var(--space-3) * var(--whitespace-scale));
	}
	.nino-cover:not(.nino-cover--padded, .nino-pr-0) > .nino-grid-row:not(.nino-pr-0, .nino-grid-row--full) {
		right: calc(var(--space-3) * var(--whitespace-scale));
	}
}
.nino-parallex > .nino-section-bg > img {
	position: absolute;
	top: 0;
	left: 0;
	height: 180%;
	will-change: transform;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse), (max-width: 767.98px) {
	.nino-parallex > img { top: 0 !important; height: 100%; transform: none !important; will-change: auto; animation: none; }
}
@media (prefers-reduced-motion: reduce), (pointer: coarse), (max-width: 767.98px) {
	.nino-parallex > .nino-section-bg > img { top: 0 !important; height: 100%; transform: none !important; will-change: auto; animation: none; }
}

/*	A padded cover: the picture stands inside the padding of the section instead
	of out to its edges, with the colour of the section round it. The padding is
	the section's own - the same distances, said here once as --cover-padding-y
	and --cover-padding-x, since the picture, the scrim of a dimmed cover and the
	content are laid out by them (a spacing class moves the section's padding and
	not these two; set them to move both - which the frame does itself where its
	content stands at the edge: a row that says nino-pl-0 and nino-pr-0 sets
	--cover-padding-x to 0, and a section that says nino-pt-0 and nino-pb-0 sets
	--cover-padding-y to 0 from 768px, so that the picture goes out to the edge
	with its content). The picture has the radius of its kind, --radius-cover,
	and so have the box of a parallax and the scrim of a dimmed cover. The content
	stands over it as it does in any cover - in the middle, or at its top or its
	bottom edge - and the picture of a parallax is in a .nino-section-bg, which
	clips it where the padding begins: an image placed straight in a parallax is
	not clipped by anything and stays as wide as the section	*/
.nino-cover--padded {
	--cover-padding-y: calc(var(--space-4) * var(--whitespace-scale));
	--cover-padding-x: 0px;
	padding: var(--cover-padding-y) var(--cover-padding-x);
}
.nino-cover--padded > .nino-section-bg,
.nino-cover--padded.nino-cover--dim::before,
.nino-cover--padded.nino-parallex--dim::before {
	inset: var(--cover-padding-y) var(--cover-padding-x);
	border-radius: var(--radius-cover);
}
.nino-cover--padded:not(.nino-parallex) > img {
	top: var(--cover-padding-y);
	left: var(--cover-padding-x);
	right: auto;
	bottom: auto;
	width: calc(100% - 2 * var(--cover-padding-x));
	height: calc(100% - 2 * var(--cover-padding-y));
	border-radius: var(--radius-cover);
}
.nino-cover--padded > .nino-grid-row,
.nino-cover--padded > .nino-cover-content {
	left: var(--cover-padding-x);
	right: var(--cover-padding-x);
}
/*	The row of a section the Builder wrote is a child of the section and says
	width: 100% as every row does - with an offset on each side that is the
	width of the section from the left offset on, and the row hangs over the
	right one by it. Auto lets the two offsets make its width, and its auto
	margins still centre it where a maximum width holds it back	*/
.nino-cover--padded > .nino-grid-row {
	width: auto;
}
/*	What the row of a padded cover holds is cut at the corners of the picture it
	stands on: a column with a ground, or a picture, at the edge of the row
	(nino-p-0) would stand out of the rounded corner of the picture, square. The
	row has the offsets of the picture at the sides, and at the top with
	nino-cover-top or at the bottom with nino-cover-bottom (below): only the two
	corners of that side are the picture's, and only those are cut, at the radius
	of the cover. The other two stand in the middle of the picture, where a column
	keeps the radius of its own, and the side between them is open - by a screen's
	height, so that the arrow of a hero and what is lifted out of the row stand out
	of it as they did. A row in the middle has no corner of the picture and cuts
	nothing. clip-path and not overflow: clip, which cuts on all four sides. It is
	laid on the margin box, which spans the picture where a maximum width centres
	the row between its auto margins: the corners that are rounded are the
	picture's, not those of a row that is narrower. It is the row that cuts and not
	the section, which clips at its own edge, the picture's only where the padding
	is 0. :where() leaves the rules no weight of their own	*/
:where(.nino-cover--padded.nino-cover-top > .nino-grid-row) {
	clip-path: inset(0 0 -100vh 0 round var(--radius-cover) var(--radius-cover) 0 0) margin-box;
}
:where(.nino-cover--padded.nino-cover-bottom > .nino-grid-row) {
	clip-path: inset(-100vh 0 0 0 round 0 0 var(--radius-cover) var(--radius-cover)) margin-box;
}
.nino-cover--padded.nino-cover-top > .nino-grid-row,
.nino-cover--padded.nino-cover-top > .nino-cover-content { top: var(--cover-padding-y); }
.nino-cover--padded.nino-cover-bottom > .nino-grid-row,
.nino-cover--padded.nino-cover-bottom > .nino-cover-content { bottom: var(--cover-padding-y); }
@media (min-width: 768px) {
	.nino-cover--padded {
		--cover-padding-y: calc(var(--space-5) * var(--whitespace-scale));
		--cover-padding-x: calc(var(--space-3) * var(--whitespace-scale));
	}
	/*	A section with no padding above and below, nino-pt-0 and nino-pb-0, has no
		inset there either - both, since the two sides are one property	*/
	.nino-cover--padded.nino-pt-0.nino-pb-0 { --cover-padding-y: 0px; }
}
/*	A row at the edge on both sides, nino-pl-0 and nino-pr-0, takes the section's
	side padding with it, and so the inset at the sides: both, since the two sides
	are one property, and asked of the row because the classes are its own	*/
.nino-cover--padded:has(> .nino-grid-row.nino-pl-0.nino-pr-0) { --cover-padding-x: 0px; }

/*	A parallax that is no cover. The height of a cover comes from the JS, which
	sizes .nino-cover and nothing else, and the rules above place its content
	over that height, in the middle of it. A parallax with no cover height has
	none of that: it is 60vh high at least, and a row placed over it, taller than
	that, hung out of the section and was cut by its overflow while the section
	stayed as it was. It sizes itself to what it holds instead, as a section
	with a picture behind it does (see .nino-section-bg): a flex column that
	keeps its row in the middle of at least 60vh, or at the top or the bottom of
	it with nino-cover-top and nino-cover-bottom, and that grows with the row.
	The row - and the content of a hand-written one - stands in the flow and is
	still over the picture and the scrim: position: relative for the z-index of
	the content, 101, and none of the offsets and the centring of the placed
	one. The picture and the scrim stay placed, and the picture is still 180%
	high behind it: the section is the box it moves in, whatever the height of
	that box is. A parallax that says nino-cover as well is a cover and has every
	rule above as it had; these come after the placed ones and take their
	offsets back, the padded cover's included.
	From 768px the section has a side padding of its own, the space step times
	the whitespace, which a placed box does not stand in and which the row of a
	cover is given as an offset: the row in the flow stands inside that padding
	without being told, and where the section gives it up - for a row at the edge,
	nino-pl-0 or nino-pr-0, or by a padding of its own, the padded one's - it is
	given up for this row as for every other. A row with no maximum width,
	nino-grid-row--full, goes to the edge, as it did placed: the section gives up
	its side padding for it, as it does for a row that says nino-pl-0 (see the
	768px rules of the sections), and the padded one keeps its own. The section keeps its padding above
	and below as well, which a placed row ignored and a row that grows the
	section needs for room; the centred row does not see it, the padding being
	the same on both sides. The width is 100% of what the padding leaves, which
	the auto of a padded cover would shrink to the content of the row, since the
	margins of a row with a maximum width are auto. The content of a
	hand-written one has the padding of the section by inheritance, to span the padding
	box it was placed in, and in the flow it stands inside that padding already: it has
	none of its own	*/
.nino-parallex:not(.nino-cover) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.nino-parallex:not(.nino-cover).nino-cover-top { justify-content: flex-start; }
.nino-parallex:not(.nino-cover).nino-cover-bottom { justify-content: flex-end; }
.nino-parallex:not(.nino-cover) > .nino-grid-row,
.nino-parallex:not(.nino-cover) > .nino-cover-content {
	position: relative;
	top: auto;
	bottom: auto;
	left: 0;
	right: auto;
	translate: none;
	z-index: 101;
}
.nino-parallex:not(.nino-cover) > .nino-grid-row { width: 100%; }
.nino-parallex:not(.nino-cover, .nino-cover--padded):has(> .nino-grid-row--full) {
	padding-left: 0;
	padding-right: 0;
}
.nino-parallex:not(.nino-cover) > .nino-cover-content {
	padding-left: 0;
	padding-right: 0;
}

/*	The picture behind a column, in a block of its own that the content of the
	column follows: what .nino-section-bg is to a section, for a column. It
	lies over the whole column and is cut at its edges, at the radius of its
	kind, --radius-column, which a column that paints a ground has as well, and
	the picture covers it. A column with a picture is the box the
	picture is placed in and a stacking context of its own, so that the
	picture goes behind the content without leaving the column and the
	content stays where it was in the flow. --dim darkens it with the scrim
	of a dimmed cover, and the column writes in the ink of the dark ground	*/
.nino-grid-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--radius-column);
	z-index: -1;
}
.nino-grid-bg > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
:has(> .nino-grid-bg, > .nino-card-bg) {
	position: relative;
	isolation: isolate;
}
/*	The column with a picture has the radius its picture is cut at, and cuts what
	is in it there too - the card has both already, a column of a ground has them
	from its rule above	*/
:has(> .nino-grid-bg) {
	border-radius: var(--radius-column);
	overflow: clip;
}
.nino-grid--dim > .nino-grid-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-background-dim);
}

/*	The picture behind a card, in a block of its own that the content of the card
	follows: what .nino-grid-bg is to a column, for a card, and the rule above makes
	the card the box it is placed in and a stacking context of its own. It lies over
	the whole card and is cut at its corners, and the picture covers it. --dim
	darkens it with the scrim of a dimmed cover, and the card writes in the ink of
	the dark ground	*/
.nino-card-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	z-index: -1;
}
.nino-card-bg > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nino-card--dim > .nino-card-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-background-dim);
}

/*	The picture behind a row, in a block of its own that the columns of the row
	follow: what .nino-grid-bg is to a column, for a row - it lies over the whole
	row, is cut at its corners, and the picture covers it. The row with a picture
	is the box it is placed in and a stacking context of its own, so that the
	picture goes behind the columns without leaving the row, and it is cut at its
	own edge as well. --dim darkens the picture with the scrim of a dimmed cover,
	and the row writes in the ink of that (see .nino-cover--dim)	*/
.nino-grid-row-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	z-index: -1;
}
.nino-grid-row-bg > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nino-grid-row:has(> .nino-grid-row-bg) {
	position: relative;
	isolation: isolate;
}
.nino-grid-row--dim > .nino-grid-row-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-background-dim);
}

/*	Where the picture behind an element starts and ends at the sides. It lies over
	the whole of the element; nino-bg-pl-<n> and nino-bg-pr-<n> on a row, a column
	or a card that holds one take it in from the left or from the right by a step
	of the space scale, 0 to 3 - 0 is the edge it lies at without a class. The
	element is as wide as it was and its content stands where it stood: only the
	ground is narrower. Asked for as a child of the element, so that a picture
	behind an element inside it keeps its own sides	*/
.nino-bg-pl-0 > :is(.nino-grid-bg, .nino-card-bg, .nino-grid-row-bg) { left: 0; }
.nino-bg-pl-1 > :is(.nino-grid-bg, .nino-card-bg, .nino-grid-row-bg) { left: var(--space-1); }
.nino-bg-pl-2 > :is(.nino-grid-bg, .nino-card-bg, .nino-grid-row-bg) { left: var(--space-2); }
.nino-bg-pl-3 > :is(.nino-grid-bg, .nino-card-bg, .nino-grid-row-bg) { left: var(--space-3); }
.nino-bg-pr-0 > :is(.nino-grid-bg, .nino-card-bg, .nino-grid-row-bg) { right: 0; }
.nino-bg-pr-1 > :is(.nino-grid-bg, .nino-card-bg, .nino-grid-row-bg) { right: var(--space-1); }
.nino-bg-pr-2 > :is(.nino-grid-bg, .nino-card-bg, .nino-grid-row-bg) { right: var(--space-2); }
.nino-bg-pr-3 > :is(.nino-grid-bg, .nino-card-bg, .nino-grid-row-bg) { right: var(--space-3); }

/*	A section of tiles: the second kind of section, for graphic tiles across the
	whole width where the first, the content section, is for editorial content
	with a reading width. The class stands after nino-section and says what the
	section is; its row is the section's whole width (chapter 02) and its columns
	are tiles. The section carries no padding - the tiles carry the room - and its
	ground, and its border, show between the tiles as grout. The rules come here,
	after the grounds of a column, its picture and the section's own padding, and
	ahead of the utilities of chapter 09, and each is one class heavy, asked for
	in :where() where it names more, so that the order decides: nino-pt-<n> on the
	section, nino-p-<n> on a tile and the grounds of a tile are what they say.
	The tile rule says its minimum height and its overflow (below), so that a tile
	is as high as its ratio asks and grows past it for the words that need more
	room, on every browser; only the picture block is cut, at the radius of the
	tile, so that a zoomed picture stays inside the corners	*/
.nino-tiles {
	padding: 0;
}
/*	A tile is a column of the row, a stack by default: the words in it one below
	the other, a gap apart, placed at the start, the middle or the end by
	--tiles-place; nino-stack-start|center|end and nino-stack-gap-<n> keep their
	meaning, being two classes heavy. The title, the subtitle, their variants and
	the rule under a title follow the scales of the tile through the properties
	set here, with no rule of their own.
	The height of a tile is a length and not an aspect-ratio: a flex item with an
	aspect-ratio has the automatic minimum size in the axis of the ratio on
	Chromium and none on WebKit, where the tile kept its ratio height and cut its
	centred words, and the intrinsic sizes of such an item are the ratio's, so
	min-height: max-content would say the ratio again. The minimum height is the
	width the width classes of chapter 02 give the tile - the width of the row
	(100cqw, the row being a size container) times the share the class sets in
	--nino-grid-share, less the share of the gap the class gives back, the gap
	being --nino-grid-gap of the row - times --nino-tile-ratio, the height over the
	width, that the ratio classes below set. Without a ratio class it is 0 and the
	tile is as high as its words; the row stretches the tiles of a line to the
	highest. The share is asked for with a fallback of 1 and not declared here,
	where the tile rule, standing after the width classes at the same weight,
	would take back what they set. The clip of a column that has a ground or a
	picture is taken back with overflow: visible, which a ground rounded by
	border-radius does not need	*/
:where(.nino-tiles) > .nino-grid-row > * {
	--section-title-scale: var(--tiles-title-scale);
	--section-subtitle-scale: var(--tiles-subtitle-scale);
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: var(--tiles-place);
	gap: calc(var(--nino-stack-gap, var(--space-2)) * var(--whitespace-gap));
	padding: calc(var(--tiles-padding) * var(--whitespace-scale));
	border-radius: var(--radius-tile);
	font-size: calc(var(--font-text-size) * var(--tiles-text-scale));
	overflow: visible;
	min-height: calc( ( 100cqw * var(--nino-grid-share, 1) - var(--nino-grid-gap, 0px) * ( 1 - var(--nino-grid-share, 1) ) ) * var(--nino-tile-ratio, 0) );
}
/*	The text of a tile has the size of the tile; the quiet and the loud variant
	state their own, from the role	*/
:where(.nino-tiles) > .nino-grid-row > * > .nino-section-text:where(:not(.nino-section-text--quiet, .nino-section-text--loud)) {
	font-size: inherit;
}
/*	A button in a tile is as wide as its label and follows the text alignment, as
	in a stack column	*/
:where(.nino-tiles) > .nino-grid-row > * > .nino-btn { justify-self: start; }
:where(.nino-tiles) > .nino-grid-row > .nino-text-center > .nino-btn { justify-self: center; }
:where(.nino-tiles) > .nino-grid-row > .nino-text-right > .nino-btn { justify-self: end; }
/*	The picture of a tile is cut at the radius of the tile and not at that of a
	column, which its own rule above would cut it at	*/
:where(.nino-tiles) > .nino-grid-row > * > .nino-grid-bg {
	overflow: clip;
	border-radius: var(--radius-tile);
}
/*	The height of the tiles: one ratio for all of them, the words of the image
	component's ratios, as the number height over width the minimum height of the
	tile rule multiplies the width with. A tile grows past it for the words that
	need more, and the tiles of one line are as high as the highest of them, since
	the row stretches its columns. Without a ratio class a tile is as high as its
	words	*/
.nino-tiles--1-1 > .nino-grid-row > * { --nino-tile-ratio: 1; }
.nino-tiles--4-3 > .nino-grid-row > * { --nino-tile-ratio: .75; }
.nino-tiles--3-2 > .nino-grid-row > * { --nino-tile-ratio: calc( 2 / 3 ); }
.nino-tiles--16-9 > .nino-grid-row > * { --nino-tile-ratio: calc( 9 / 16 ); }
.nino-tiles--21-9 > .nino-grid-row > * { --nino-tile-ratio: calc( 9 / 21 ); }
.nino-tiles--4-1 > .nino-grid-row > * { --nino-tile-ratio: .25; }
.nino-tiles--5-1 > .nino-grid-row > * { --nino-tile-ratio: .2; }

/* Contentslider */
/*	content-box against the page's own border-box: Nino.ui.js measures the
	track and writes that height onto the slider, and under border-box the
	padding below is taken out of it - the absolutely positioned track then
	ran into the band the controls sit in, and .nino-slider-controls was
	drawn over the last 40px of every slide. The padding is room for the
	controls, which is what it says, and now what it is.

	Its track is absolutely positioned, so the slider holds nothing in the flow
	and a box that sizes it by its content - an item of a flex row, of a grid that
	places its content at the start - made it as wide as nothing, and the slides
	were as wide as that. It says its width: the box it stands in, from which
	Nino.ui.js measures, min-width 0 so that nothing holds it wider than that
	box, and align-self so that it is stretched, not sized, in a flex column	*/
.nino-slider {
	position: relative;
	overflow: hidden;
	box-sizing: content-box;
	padding-bottom: 40px; /* room for .nino-slider-controls */
	width: 100%;
	min-width: 0;
	align-self: stretch;
}
.nino-slider ul {
	display: flex;
	position: absolute;
	padding: 0;
	margin: 0;
	transition: left 600ms cubic-bezier(0.4,0,0.2,1);
}
.nino-slider.nino-is-touch ul {
	transition: none;
}
.nino-slider li {
	opacity: .6;
	transition: opacity 200ms;
}
.nino-slider li.nino-is-active {
	opacity: 1;
}
.nino-slider li img {
	width: 100%;
}

/* Controls - prev button, dots, next button, grouped into one centered row
   regardless of how wide the slider itself is */
.nino-slider-controls {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
/* A real <button> since it has to be operable with a keyboard - so it also
   has to stop looking like the browser's own */
.nino-slider-button {
	cursor: pointer;
	font-size: 1.8rem;
	line-height: 1rem;
	padding: 2px 8px 8px 8px;
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	font-family: inherit;
}
/* Specificity note: .nino-slider ul (above) matches this too since it's
   still a <ul> descendant of .nino-slider - needs the extra .nino-slider-controls
   ancestor class to actually win over position/display/transition */
.nino-slider-controls .nino-slider-points {
	position: static;
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: none;
}
/*	The dot is the <li> and stays 12px. It is no slide: the fade an inactive
	slide has (.nino-slider li above) took the ring of the button in it along - 1.8:1
	on the dots that were not the current one - and the dot itself with it,
	which is the border role at full strength now, solved to 3:1 against its
	ground. The margin leaves 24px from the middle of a dot to the next, which
	is the hit area of a dot	*/
.nino-slider-points li {
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--color-border);
	margin: 0 6px;
	opacity: 1;
	cursor: pointer;
	transition: background-color .2s;
}
.nino-slider-points li.nino-is-active {
	background-color: var(--color-secondary);
}
/*	The button inside the dot is what a visitor presses, and it is 24px round
	the 12px dot - the size of a target, WCAG 2.2 SC 2.5.8 - with the dot in its
	middle. Its ring is the one every control has, tight to the button, with a
	line of the ink inside it, and so there are two lines to see it by	*/
.nino-slider-point {
	position: absolute;
	inset: -6px;
	display: block;
	padding: 0;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.nino-slider-point:focus-visible {
	outline-offset: 0;
	box-shadow: inset 0 0 0 2px var(--color-ink);
}

/* Viewport animations (vpa) - default is a subtle fade+rise. --zoom/--zoom-
   out/--slide-left/--slide-right/--slide-up/--slide-down/--blur/--flip are
   drop-in alternatives, each split into a -soft/-medium/-hard intensity (e.g.
   nino-vpa--zoom-soft).
   --speed-slow/-medium/-fast controls the transition duration, independent
   of which variant is used. Everything is implemented as custom properties
   (--vpa-t-* /--vpa-f-* /--vpa-origin/--vpa-duration) rather than fixed
   values, which makes it all inheritable: put a variant and/or speed class
   on <body> to set the page-wide default, and any .nino-vpa element picks it
   up automatically; an element carrying its own variant/speed class always
   overrides what it would otherwise inherit, since a property set directly
   on an element beats one inherited from an ancestor regardless of the
   ancestor rule's specificity. --repeat/-delay/-duration and the visible/
   visible-once toggling itself keep working unchanged */
:root {
	--vpa-t-hidden: translateY(.5rem);
	--vpa-t-visible: translateY(0px);
	--vpa-f-hidden: none;
	--vpa-f-visible: none;
	--vpa-origin: center;
	--vpa-duration: 1s;
}
.nino-vpa {
	transform-origin: var(--vpa-origin);
}
.nino-vpa, .nino-vpa--visible-once.nino-vpa--repeat {
	opacity: 0;
	transform: var(--vpa-t-hidden);
	filter: var(--vpa-f-hidden);
	transition-property: opacity, transform, filter;
	transition-duration: var(--vpa-duration);
	transition-timing-function: cubic-bezier(0.5, 0, 0.7, 1);
}
.nino-vpa--visible-once,
.nino-vpa--visible,
.nino-vpa--visible-once.nino-vpa--repeat.nino-vpa--visible {
	opacity: 1;
	transform: var(--vpa-t-visible);
	filter: var(--vpa-f-visible);
}

/* --speed-*: duration only, combine with any variant below (or the plain
   default). The plain default lasts a second, which --speed-medium says
   again; --speed-fast is under half of it and --speed-slow twice it -
   deliberately slow, not just "a bit slower" */
.nino-vpa--speed-fast { --vpa-duration: .45s; }
.nino-vpa--speed-medium { --vpa-duration: 1s; }
.nino-vpa--speed-slow { --vpa-duration: 2s; }

/* --zoom-*: scales up into place, a snappier "pop" than the plain
   fade+rise. soft/medium/hard = how far out the scale starts */
.nino-vpa--zoom-soft { --vpa-t-hidden: scale(.94); --vpa-t-visible: scale(1); }
.nino-vpa--zoom-medium { --vpa-t-hidden: scale(.85); --vpa-t-visible: scale(1); }
.nino-vpa--zoom-hard { --vpa-t-hidden: scale(.7); --vpa-t-visible: scale(1); }

/* --zoom-out-*: the mirror of --zoom-* - starts oversized and settles down
   to its actual size, reads as the content "arriving" rather than "growing" */
.nino-vpa--zoom-out-soft { --vpa-t-hidden: scale(1.06); --vpa-t-visible: scale(1); }
.nino-vpa--zoom-out-medium { --vpa-t-hidden: scale(1.15); --vpa-t-visible: scale(1); }
.nino-vpa--zoom-out-hard { --vpa-t-hidden: scale(1.35); --vpa-t-visible: scale(1); }

/* --slide-left-* /--slide-right-*: a horizontal travel instead of the
   default's vertical rise - good for alternating card/timeline layouts
   where left/right reinforces which "side" a piece of content belongs to */
.nino-vpa--slide-left-soft { --vpa-t-hidden: translateX(1.5rem); --vpa-t-visible: translateX(0); }
.nino-vpa--slide-left-medium { --vpa-t-hidden: translateX(3rem); --vpa-t-visible: translateX(0); }
.nino-vpa--slide-left-hard { --vpa-t-hidden: translateX(6rem); --vpa-t-visible: translateX(0); }
.nino-vpa--slide-right-soft { --vpa-t-hidden: translateX(-1.5rem); --vpa-t-visible: translateX(0); }
.nino-vpa--slide-right-medium { --vpa-t-hidden: translateX(-3rem); --vpa-t-visible: translateX(0); }
.nino-vpa--slide-right-hard { --vpa-t-hidden: translateX(-6rem); --vpa-t-visible: translateX(0); }

/* --slide-up-* /--slide-down-*: the same travel on the other axis, and named
   the same way - for the motion the visitor sees, as slide-left slides left:
   slide-up starts below its place and slides up into it, slide-down starts
   above it and slides down. The default rise is a short slide-up already, so
   slide-up is the one to choose when it should be longer, and slide-down is
   the one the default has no counterpart of */
.nino-vpa--slide-up-soft { --vpa-t-hidden: translateY(1.5rem); --vpa-t-visible: translateY(0); }
.nino-vpa--slide-up-medium { --vpa-t-hidden: translateY(3rem); --vpa-t-visible: translateY(0); }
.nino-vpa--slide-up-hard { --vpa-t-hidden: translateY(6rem); --vpa-t-visible: translateY(0); }
.nino-vpa--slide-down-soft { --vpa-t-hidden: translateY(-1.5rem); --vpa-t-visible: translateY(0); }
.nino-vpa--slide-down-medium { --vpa-t-hidden: translateY(-3rem); --vpa-t-visible: translateY(0); }
.nino-vpa--slide-down-hard { --vpa-t-hidden: translateY(-6rem); --vpa-t-visible: translateY(0); }

/* --blur-*: soft-focus-in, on top of whatever transform is already in
   effect (the default rise, or a --zoom-* /--slide-* /--flip-* combined on
   the same element - only --vpa-f-* is set here, --vpa-t-* is left alone,
   so blur is the one variant that freely combines with any other) */
.nino-vpa--blur-soft { --vpa-f-hidden: blur(6px); --vpa-f-visible: blur(0); }
.nino-vpa--blur-medium { --vpa-f-hidden: blur(12px); --vpa-f-visible: blur(0); }
.nino-vpa--blur-hard { --vpa-f-hidden: blur(24px); --vpa-f-visible: blur(0); }

/* --flip-*: a playful 3D tilt-down into place - the loudest of the
   set, best used sparingly (one hero/callout, not a whole repeated grid) */
.nino-vpa--flip-soft { --vpa-t-hidden: perspective(800px) rotateX(-20deg); --vpa-t-visible: perspective(800px) rotateX(0deg); --vpa-origin: top center; }
.nino-vpa--flip-medium { --vpa-t-hidden: perspective(800px) rotateX(-40deg); --vpa-t-visible: perspective(800px) rotateX(0deg); --vpa-origin: top center; }
.nino-vpa--flip-hard { --vpa-t-hidden: perspective(800px) rotateX(-65deg); --vpa-t-visible: perspective(800px) rotateX(0deg); --vpa-origin: top center; }

/*	The five handles of the hover of a picture (.nino-hover, with the images): a
	design layer sets them on main, as it sets the viewport animation's above, and a
	template on a frame or round it. What stands here is the kernel's own, a gentle
	zoom and nothing else:
		--image-hover-scale       a factor: the picture grows inside its frame
		--image-hover-lift        a length: the frame rises, which a negative one does
		--image-hover-brightness  a factor: the picture brightens
		--image-hover-shadow      a box-shadow: cast by the frame while the effect shows
		--image-hover-duration    a time: how long the change takes	*/
:root {
	--image-hover-scale: 1.04;
	--image-hover-lift: 0px;
	--image-hover-brightness: 1;
	--image-hover-shadow: none;
	--image-hover-duration: .3s;
}

/* Preloader */
.nino-preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-background);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1;
	transition: opacity 1s ease;
}
.nino-preloader::after {
	content: "";
	width: 50px;
	height: 50px;
	border: 5px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	border-top-color: var(--color-secondary);
	animation: nino-fx-spin 1s ease-in-out infinite;
}
@keyframes nino-fx-spin {
	to { transform: rotate(360deg); }
}

/* Tabs */
.nino-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-2);
}
.nino-tabs-tab {
	padding: var(--space-1) var(--space-2);
	cursor: pointer;
	border: none;
	background: none;
	font: inherit;
	color: inherit;
	border-bottom: 2px solid transparent;
}
.nino-tabs-tab.nino-is-active {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}
.nino-tabs-panel {
	display: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease, display .2s allow-discrete;
}
.nino-tabs-panel.nino-is-active {
	display: block;
	opacity: 1;
	transform: translateY(0);
}
/* The attribute the script sets beside the class, said again here: hidden is
   display:none out of the browser's own stylesheet, and any author rule that
   gives one of these elements a display - the rule above, or a project's own
   stylesheet loaded after this one - beats it */
.nino-tabs-panel[hidden],
.nino-filter-item[hidden] {
	display: none;
}

/* Fades the panel in on switch - degrades gracefully (instant show) in
   browsers without @starting-style/allow-discrete support */
@starting-style {
	.nino-tabs-panel.nino-is-active {
		opacity: 0;
		transform: translateY(4px);
	}
}

/* Category filter - a row of toggle buttons, not a tablist: every button
   stays reachable and keeps its native semantics (aria-pressed), so unlike
   .nino-tabs-tab above there is no role/tabindex work for the JS to do.
   .nino-filter-item (the filtered cards) needs no rule beyond the [hidden]
   one above - visibility is the plain attribute the script sets.

   .nino-filter has to re-establish the grid: it wraps both the nav and the
   cards so one querySelectorAll() finds both, which means the cards are no
   longer direct children of .nino-grid-row and would lose the flex context
   their .nino-grid-m-* widths need. It is itself a flex child of that row,
   so it also has to claim the full line. */
.nino-filter {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.nino-filter-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	width: 100%;
	margin-bottom: var(--space-2);
}
.nino-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: calc( var(--space-1) / 2 );
	padding: calc( var(--space-1) / 2 ) var(--space-2);
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	background: none;
	font: inherit;
	font-size: var(--font-button-size);
	color: inherit;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nino-filter-btn:hover, .nino-filter-btn:focus {
	border-color: var(--color-accent);
}
.nino-filter-btn.nino-is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-text);
}
.nino-filter-count {
	opacity: .7;
	font-size: .85em;
}

/* Modal / Lightbox - native <dialog>, JS only opens/closes it (see
   Nino.ui.js) - focus-trapping, ESC-to-close and the backdrop click target
   all come from the browser for free */
.nino-modal {
	/* the global reset zeroes out margin - restore it, since the native
	   centering (dialog:modal { position:fixed; inset:0 }) relies on it */
	margin: auto;
	border: none;
	border-radius: var(--radius);
	padding: var(--space-3);
	max-width: 90vw;
	width: 480px;
	background-color: var(--color-background);
	color: var(--color-text);
	--color-ground: var(--color-background);
	--color-ink: var(--color-text);
	--logo-light: var(--color-logo-light);
	--logo-dark: var(--color-logo-dark);
	--color-title: var(--color-title-default);
	--color-accent: var(--color-accent-default);
}
.nino-modal::backdrop {
	background-color: rgba(0, 0, 0, .5);
}
.nino-modal--lightbox {
	width: auto;
	padding: 0;
	background: none;
}
.nino-modal--lightbox img {
	display: block;
	max-width: 90vw;
	max-height: 85vh;
}
/* Explicit width instead of --lightbox's auto/shrink-to-fit - a .nino-video
   child has no intrinsic size of its own (percentage width), so shrink-to-fit
   can't resolve a sensible dialog width the way it does for a plain <img> */
.nino-modal--video {
	width: min(90vw, 900px);
}
/*	The cross was as wide as its glyph, 15px, and the box it is drawn in is no
	less than a target is now: 24px each way, WCAG 2.2 SC 2.5.8	*/
.nino-modal-close {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	border: none;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-text);
}

/* Toast - created/removed entirely by JS via Nino.ui.toast(), see
   Nino.ui.js - no markup to author, nothing to add to a template */
.nino-toast-container {
	position: fixed;
	bottom: var(--space-2);
	right: var(--space-2);
	z-index: 9998;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.nino-toast {
	padding: var(--space-2);
	border-radius: var(--radius);
	background-color: var(--color-section-black-bg);
	color: var(--color-section-black-text);
	--color-ground: var(--color-section-black-bg);
	--color-ink: var(--color-section-black-text);
	--logo-light: var(--color-section-black-logo-light);
	--logo-dark: var(--color-section-black-logo-dark);
	--color-title: var(--color-section-black-text);
	--color-accent: var(--color-accent-black);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s, transform .3s;
}
.nino-toast--visible {
	opacity: 1;
	transform: translateY(0);
}
/*	A toast that reports a status paints the surface of the status, and says so */
.nino-toast--success {
	background-color: var(--color-success);
	color: var(--color-success-text);
	--color-ground: var(--color-success);
	--color-ink: var(--color-success-text);
	--logo-light: var(--color-success-logo-light);
	--logo-dark: var(--color-success-logo-dark);
}
.nino-toast--error {
	background-color: var(--color-error);
	color: var(--color-error-text);
	--color-ground: var(--color-error);
	--color-ink: var(--color-error-text);
	--logo-light: var(--color-error-logo-light);
	--logo-dark: var(--color-error-logo-dark);
}

/****************************************************************************************************
 *
 *
 *			09 Utilities
 *
 *
 *			Spacing, alignment, opacity and visibility - and deliberately the last
 *			chapter in this file. A utility only earns its name if it wins: while
 *			these sat in the middle of the stylesheet, every component defined
 *			below them (an alert, a table, a modal, a pricing card) quietly beat
 *			their own padding, so nino-p-3 on a nino-alert did nothing at all.
 *			Equal specificity, later position - that is the whole mechanism.
 *
 *
 *			.nino-m(t,r,b,l)(-0 … -6), .nino-p(t,r,b,l)(-0 … -6), .nino-mx-auto
 *			.nino-spacer(-1 … -6)
 *			.nino-text(*, -s, -m, -l, -xl)(-left, -center, -right)
 *			.nino-opacity(-10 … -90)
 *			.nino-hidden(*, -s, -m, -l, -xl), .nino-visible(-s, -m, -l, -xl)
 *			.nino-invisible, .nino-sr-only
 *
 *
 ****************************************************************************************************/

/* Spacing */
.nino-m-0 { margin: 0; }
.nino-m-1 { margin: var(--space-1); }
.nino-m-2 { margin: var(--space-2); }
.nino-m-3 { margin: var(--space-3); }
.nino-m-4 { margin: var(--space-4); }
.nino-m-5 { margin: var(--space-5); }
.nino-m-6 { margin: var(--space-6); }
.nino-mt-0 { margin-top: 0; }
.nino-mt-1 { margin-top: var(--space-1); }
.nino-mt-2 { margin-top: var(--space-2); }
.nino-mt-3 { margin-top: var(--space-3); }
.nino-mt-4 { margin-top: var(--space-4); }
.nino-mt-5 { margin-top: var(--space-5); }
.nino-mt-6 { margin-top: var(--space-6); }
.nino-mb-0 { margin-bottom: 0; }
.nino-mb-1 { margin-bottom: var(--space-1); }
.nino-mb-2 { margin-bottom: var(--space-2); }
.nino-mb-3 { margin-bottom: var(--space-3); }
.nino-mb-4 { margin-bottom: var(--space-4); }
.nino-mb-5 { margin-bottom: var(--space-5); }
.nino-mb-6 { margin-bottom: var(--space-6); }
.nino-mx-auto { margin-right: auto; margin-left: auto; }
.nino-ml-0 { margin-left: 0; }
.nino-ml-1 { margin-left: var(--space-1); }
.nino-ml-2 { margin-left: var(--space-2); }
.nino-ml-3 { margin-left: var(--space-3); }
.nino-ml-4 { margin-left: var(--space-4); }
.nino-ml-5 { margin-left: var(--space-5); }
.nino-ml-6 { margin-left: var(--space-6); }
.nino-mr-0 { margin-right: 0; }
.nino-mr-1 { margin-right: var(--space-1); }
.nino-mr-2 { margin-right: var(--space-2); }
.nino-mr-3 { margin-right: var(--space-3); }
.nino-mr-4 { margin-right: var(--space-4); }
.nino-mr-5 { margin-right: var(--space-5); }
.nino-mr-6 { margin-right: var(--space-6); }
/*	The room [spacer] leaves, as a height of its own: nino-spacer-1 to -6, the
	steps of the margins above. A spacer used to be nino-mt-N, so that its size
	and the margin a column writes on it (nino-mt-2) were one property and the
	larger step won; with a height the margin is room on top of it	*/
.nino-spacer-1 { height: var(--space-1); }
.nino-spacer-2 { height: var(--space-2); }
.nino-spacer-3 { height: var(--space-3); }
.nino-spacer-4 { height: var(--space-4); }
.nino-spacer-5 { height: var(--space-5); }
.nino-spacer-6 { height: var(--space-6); }
.nino-p-0 { padding: 0; }
.nino-p-1 { padding: var(--space-1); }
.nino-p-2 { padding: var(--space-2); }
.nino-p-3 { padding: var(--space-3); }
.nino-p-4 { padding: var(--space-4); }
.nino-p-5 { padding: var(--space-5); }
.nino-p-6 { padding: var(--space-6); }
.nino-pt-0 { padding-top: 0; }
.nino-pt-1 { padding-top: var(--space-1); }
.nino-pt-2 { padding-top: var(--space-2); }
.nino-pt-3 { padding-top: var(--space-3); }
.nino-pt-4 { padding-top: var(--space-4); }
.nino-pt-5 { padding-top: var(--space-5); }
.nino-pt-6 { padding-top: var(--space-6); }
.nino-pb-0 { padding-bottom: 0; }
.nino-pb-1 { padding-bottom: var(--space-1); }
.nino-pb-2 { padding-bottom: var(--space-2); }
.nino-pb-3 { padding-bottom: var(--space-3); }
.nino-pb-4 { padding-bottom: var(--space-4); }
.nino-pb-5 { padding-bottom: var(--space-5); }
.nino-pb-6 { padding-bottom: var(--space-6); }
/*	The sides of a padding, as the top and the bottom have them: what a grid row
	says to put its content at the edge or a step in from it. nino-pl-0 and
	nino-pr-0 also take the side padding of the section the row stands in away
	(the edge rule of the section, chapter 04)	*/
.nino-pl-0 { padding-left: 0; }
.nino-pl-1 { padding-left: var(--space-1); }
.nino-pl-2 { padding-left: var(--space-2); }
.nino-pl-3 { padding-left: var(--space-3); }
.nino-pl-4 { padding-left: var(--space-4); }
.nino-pl-5 { padding-left: var(--space-5); }
.nino-pl-6 { padding-left: var(--space-6); }
.nino-pr-0 { padding-right: 0; }
.nino-pr-1 { padding-right: var(--space-1); }
.nino-pr-2 { padding-right: var(--space-2); }
.nino-pr-3 { padding-right: var(--space-3); }
.nino-pr-4 { padding-right: var(--space-4); }
.nino-pr-5 { padding-right: var(--space-5); }
.nino-pr-6 { padding-right: var(--space-6); }

/* Text alignment */
.nino-text-left { text-align: left; }
.nino-text-center { text-align: center; }
.nino-text-right { text-align: right; }
/* nino-section-title and its siblings center themselves, so an alignment set on
   the block around them has to reach in - otherwise "left" moves everything
   except the heading */
.nino-text-left :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: left; }
.nino-text-center :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: center; }
.nino-text-right :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: right; }
.nino-text-center > .nino-btn, .nino-text-center > .nino-card-content > .nino-btn { margin-right: calc(var(--space-1) / 2); margin-left: calc(var(--space-1) / 2); }
.nino-text-right > .nino-btn, .nino-text-right > .nino-card-content > .nino-btn { margin-left: var(--space-1); }

/*	The alignment of the text from a width up, the tiers of the grid: each tier
	brings what the class without a tier brings - the titles, the margins of a
	button, where a button stands in a stack, a card and a tile, the loud text -
	and the four blocks stand in the order of the widths, after the rules above,
	so that a wider tier wins over a narrower one and every tier over the class
	without a tier	*/
@media (min-width: 640px) {
	.nino-text-s-left { text-align: left; }
	.nino-text-s-left :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: left; }
	.nino-text-s-left > .nino-btn, .nino-text-s-left > .nino-card-content > .nino-btn { margin-right: 0; margin-left: 0; }
	.nino-text-s-left > .nino-section-text--loud { margin-right: 0; margin-left: 0; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-s-left > .nino-btn { justify-self: start; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-s-left > .nino-btn,
	.nino-card--last-bottom.nino-text-s-left > .nino-card-content > .nino-btn { align-self: flex-start; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-s-left > .nino-btn { justify-self: start; }
	.nino-text-s-center { text-align: center; }
	.nino-text-s-center :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: center; }
	.nino-text-s-center > .nino-btn, .nino-text-s-center > .nino-card-content > .nino-btn { margin-right: calc(var(--space-1) / 2); margin-left: calc(var(--space-1) / 2); }
	.nino-text-s-center > .nino-section-text--loud { margin-right: auto; margin-left: auto; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-s-center > .nino-btn { justify-self: center; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-s-center > .nino-btn,
	.nino-card--last-bottom.nino-text-s-center > .nino-card-content > .nino-btn { align-self: center; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-s-center > .nino-btn { justify-self: center; }
	.nino-text-s-right { text-align: right; }
	.nino-text-s-right :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: right; }
	.nino-text-s-right > .nino-btn, .nino-text-s-right > .nino-card-content > .nino-btn { margin-right: 0; margin-left: var(--space-1); }
	.nino-text-s-right > .nino-section-text--loud { margin-right: 0; margin-left: 0; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-s-right > .nino-btn { justify-self: end; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-s-right > .nino-btn,
	.nino-card--last-bottom.nino-text-s-right > .nino-card-content > .nino-btn { align-self: flex-end; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-s-right > .nino-btn { justify-self: end; }
}
@media (min-width: 768px) {
	.nino-text-m-left { text-align: left; }
	.nino-text-m-left :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: left; }
	.nino-text-m-left > .nino-btn, .nino-text-m-left > .nino-card-content > .nino-btn { margin-right: 0; margin-left: 0; }
	.nino-text-m-left > .nino-section-text--loud { margin-right: 0; margin-left: 0; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-m-left > .nino-btn { justify-self: start; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-m-left > .nino-btn,
	.nino-card--last-bottom.nino-text-m-left > .nino-card-content > .nino-btn { align-self: flex-start; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-m-left > .nino-btn { justify-self: start; }
	.nino-text-m-center { text-align: center; }
	.nino-text-m-center :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: center; }
	.nino-text-m-center > .nino-btn, .nino-text-m-center > .nino-card-content > .nino-btn { margin-right: calc(var(--space-1) / 2); margin-left: calc(var(--space-1) / 2); }
	.nino-text-m-center > .nino-section-text--loud { margin-right: auto; margin-left: auto; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-m-center > .nino-btn { justify-self: center; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-m-center > .nino-btn,
	.nino-card--last-bottom.nino-text-m-center > .nino-card-content > .nino-btn { align-self: center; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-m-center > .nino-btn { justify-self: center; }
	.nino-text-m-right { text-align: right; }
	.nino-text-m-right :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: right; }
	.nino-text-m-right > .nino-btn, .nino-text-m-right > .nino-card-content > .nino-btn { margin-right: 0; margin-left: var(--space-1); }
	.nino-text-m-right > .nino-section-text--loud { margin-right: 0; margin-left: 0; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-m-right > .nino-btn { justify-self: end; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-m-right > .nino-btn,
	.nino-card--last-bottom.nino-text-m-right > .nino-card-content > .nino-btn { align-self: flex-end; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-m-right > .nino-btn { justify-self: end; }
}
@media (min-width: 1024px) {
	.nino-text-l-left { text-align: left; }
	.nino-text-l-left :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: left; }
	.nino-text-l-left > .nino-btn, .nino-text-l-left > .nino-card-content > .nino-btn { margin-right: 0; margin-left: 0; }
	.nino-text-l-left > .nino-section-text--loud { margin-right: 0; margin-left: 0; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-l-left > .nino-btn { justify-self: start; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-l-left > .nino-btn,
	.nino-card--last-bottom.nino-text-l-left > .nino-card-content > .nino-btn { align-self: flex-start; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-l-left > .nino-btn { justify-self: start; }
	.nino-text-l-center { text-align: center; }
	.nino-text-l-center :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: center; }
	.nino-text-l-center > .nino-btn, .nino-text-l-center > .nino-card-content > .nino-btn { margin-right: calc(var(--space-1) / 2); margin-left: calc(var(--space-1) / 2); }
	.nino-text-l-center > .nino-section-text--loud { margin-right: auto; margin-left: auto; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-l-center > .nino-btn { justify-self: center; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-l-center > .nino-btn,
	.nino-card--last-bottom.nino-text-l-center > .nino-card-content > .nino-btn { align-self: center; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-l-center > .nino-btn { justify-self: center; }
	.nino-text-l-right { text-align: right; }
	.nino-text-l-right :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: right; }
	.nino-text-l-right > .nino-btn, .nino-text-l-right > .nino-card-content > .nino-btn { margin-right: 0; margin-left: var(--space-1); }
	.nino-text-l-right > .nino-section-text--loud { margin-right: 0; margin-left: 0; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-l-right > .nino-btn { justify-self: end; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-l-right > .nino-btn,
	.nino-card--last-bottom.nino-text-l-right > .nino-card-content > .nino-btn { align-self: flex-end; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-l-right > .nino-btn { justify-self: end; }
}
@media (min-width: 1280px) {
	.nino-text-xl-left { text-align: left; }
	.nino-text-xl-left :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: left; }
	.nino-text-xl-left > .nino-btn, .nino-text-xl-left > .nino-card-content > .nino-btn { margin-right: 0; margin-left: 0; }
	.nino-text-xl-left > .nino-section-text--loud { margin-right: 0; margin-left: 0; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-xl-left > .nino-btn { justify-self: start; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-xl-left > .nino-btn,
	.nino-card--last-bottom.nino-text-xl-left > .nino-card-content > .nino-btn { align-self: flex-start; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-xl-left > .nino-btn { justify-self: start; }
	.nino-text-xl-center { text-align: center; }
	.nino-text-xl-center :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: center; }
	.nino-text-xl-center > .nino-btn, .nino-text-xl-center > .nino-card-content > .nino-btn { margin-right: calc(var(--space-1) / 2); margin-left: calc(var(--space-1) / 2); }
	.nino-text-xl-center > .nino-section-text--loud { margin-right: auto; margin-left: auto; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-xl-center > .nino-btn { justify-self: center; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-xl-center > .nino-btn,
	.nino-card--last-bottom.nino-text-xl-center > .nino-card-content > .nino-btn { align-self: center; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-xl-center > .nino-btn { justify-self: center; }
	.nino-text-xl-right { text-align: right; }
	.nino-text-xl-right :is(.nino-section-title, .nino-section-subtitle, .nino-hero-title, .nino-hero-subtitle) { text-align: right; }
	.nino-text-xl-right > .nino-btn, .nino-text-xl-right > .nino-card-content > .nino-btn { margin-right: 0; margin-left: var(--space-1); }
	.nino-text-xl-right > .nino-section-text--loud { margin-right: 0; margin-left: 0; }
	.nino-grid-row > :is(.nino-stack-start, .nino-stack-center, .nino-stack-end, [class*="nino-stack-gap-"]:not(.nino-stack)).nino-text-xl-right > .nino-btn { justify-self: end; }
	:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom).nino-text-xl-right > .nino-btn,
	.nino-card--last-bottom.nino-text-xl-right > .nino-card-content > .nino-btn { align-self: flex-end; }
	:where(.nino-tiles) > .nino-grid-row > .nino-text-xl-right > .nino-btn { justify-self: end; }
}


/* Opacity */
.nino-opacity-10 { opacity: .1; }
.nino-opacity-20 { opacity: .2; }
.nino-opacity-30 { opacity: .3; }
.nino-opacity-40 { opacity: .4; }
.nino-opacity-50 { opacity: .5; }
.nino-opacity-60 { opacity: .6; }
.nino-opacity-70 { opacity: .7; }
.nino-opacity-80 { opacity: .8; }
.nino-opacity-90 { opacity: .9; }

/* Visibility */
.nino-hidden { display: none !important; }
.nino-invisible { visibility: hidden !important; }
.nino-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/*	...until it has the focus: a link that is written for a keyboard - the skip
	link, the first stop of every page - shows itself where the Tab key put it
	and is gone when the focus has left. Fixed, so that it is in the corner of
	the screen wherever the page has been scrolled to, and above the header,
	which is fixed as well	*/
a.nino-sr-only:focus {
	position: fixed;
	top: var(--space-1);
	left: var(--space-1);
	z-index: 1000;
	width: auto;
	height: auto;
	padding: var(--space-1) var(--space-2);
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background-color: var(--color-ground);
	color: var(--color-ink);
	border-radius: var(--radius);
}

/* A visitor who asked their system for less motion. The parallax has said
   this since it was written (see .nino-parallex above); this is the rest of
   the file saying it too: everything that moves on its own stops, everything
   that moves on the way in simply arrives, and a jump to an anchor is a jump
   rather than a ride.

   This used to be the three named animations and one transition below, and
   nothing else - so the other twenty-four transitions this file declares kept
   their full travel: the slider slid its 600ms, the burger menu unrolled, the
   toast faded in, the preloader faded out over a
   second, every button and field crossfaded its colours. The clamp below is
   what says it once, for everything, rather than one rule per component that
   the next component forgets.

   A duration of .01ms, not `animation: none`: a state change still happens,
   it simply arrives instead of travelling - which is what keeps the ones a
   visitor asked for by pressing something. The three that move without
   anybody doing anything are the exception and are still stopped outright,
   after the clamp and with !important, or the clamp would restart them at one
   hundredth of a millisecond each. */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	/* The three that move without anybody doing anything: the arrow and the
	   bounce for a few runs, the preloader for as long as it is there */
	.nino-hero-arrowdown,
	.nino-fx-vertical-bounce,
	.nino-preloader::after {
		animation: none !important;
	}

	/* A viewport animation is a fade and a rise on the way in - here the
	   element is simply there. Visible rather than merely un-animated: with
	   the transition gone but the hidden state kept, an element whose script
	   never ran would stay invisible for good */
	.nino-vpa,
	.nino-vpa--visible-once.nino-vpa--repeat {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

.nino-hidden-s { display: none !important; }
.nino-visible-s { display: block !important; }

@media (min-width: 768px) {
	.nino-visible-m { display: block !important; }
	.nino-hidden-m { display: none !important; }
}
@media (min-width: 1024px) {
	.nino-visible-l { display: block !important; }
	.nino-hidden-l { display: none !important; }
}
@media (min-width: 1280px) {
	.nino-visible-xl { display: block !important; }
	.nino-hidden-xl { display: none !important; }
}
/*	Generated by the Design feature. Do not edit - the next compile
 *	rewrites this file, and anything put here is gone.
 *
 *	To change it: the Design panel, or data/design.php and compile again.
 *	To take it over by hand: delete the line below, and Design will
 *	refuse to overwrite the file from then on.
 *
 *	nino-design-sha256: 60e8cf36c114427cff77e0edcf8e04ef6a94550976e0ba933475fefcb949e5cd
 *
 *	root size  default
 *	width      default
 *	whitespace default
 *	radius     least
 *	radius alt least
 *	radii      cover standard, row standard, column standard, tile standard, card standard, image standard
 *	animation  as Nino.css has it
 *	theme      nino
 *
 *   header     regular  (nav least, space less, ground less, border-size least, position more, cta less, nav-hover fade)
 *   footer     one-legal-row  (position more)
 *   section    regular  (title-tracking least, rule full, rule-length more, rule-color more)
 *   tiles      regular
 *   card       regular  (title less, subtitle less, title-tracking least, border least)
 *   buttons    regular  (size less, corners least, case more)
 *   lists      regular
 *   tables     regular
 *   forms      filled  (label subtitle)
 *   tabs       regular
 *   accordion  regular
 *
 *   title      Poppins, bold, 2.2rem
 *   subtitle   Poppins, normal, 1.5rem
 *   text       Open Sans, normal, 1.2rem
 *   button     Poppins, normal
 *   code       the system stack, normal
 */
/* ==== 1. the design tokens ==== */
:root {
	color-scheme: light dark;
	--nino-default: #ffffff;
	--nino-on-default: #0b0e10;
	--nino-on-default-muted: #757778;
	--nino-default-link: #387cab;
	--nino-default-border: #949596;
	--nino-default-focus: #469cd7;
	--nino-default-disabled: #aeaeaf;
	--nino-default-shadow: rgb(15 23 42 / 12%);
	--nino-default-logo-light: block;
	--nino-default-logo-dark: none;
	--nino-alt: #eef4fa;
	--nino-on-alt: #0b0e10;
	--nino-on-alt-muted: #6e6f71;
	--nino-alt-link: #3075a4;
	--nino-alt-border: #8c8d8e;
	--nino-alt-focus: #3c94cd;
	--nino-alt-disabled: #a5a6a7;
	--nino-alt-shadow: rgb(15 23 42 / 12%);
	--nino-alt-logo-light: block;
	--nino-alt-logo-dark: none;
	--nino-tint: #e3f3ff;
	--nino-on-tint: #0b0e10;
	--nino-on-tint-muted: #666f77;
	--nino-tint-link: #2e73a2;
	--nino-tint-border: #868c91;
	--nino-tint-focus: #3b92cc;
	--nino-tint-disabled: #9fa4a9;
	--nino-tint-shadow: rgb(15 23 42 / 12%);
	--nino-tint-logo-light: block;
	--nino-tint-logo-dark: none;
	--nino-dark: #2a2f32;
	--nino-on-dark: #fcfcfc;
	--nino-on-dark-muted: #939597;
	--nino-dark-link: #589ccc;
	--nino-dark-border: #757777;
	--nino-dark-focus: #207db5;
	--nino-dark-disabled: #616262;
	--nino-dark-shadow: rgb(15 23 42 / 12%);
	--nino-dark-logo-light: none;
	--nino-dark-logo-dark: block;
	--nino-black: #0e1216;
	--nino-on-black: #fcfcfc;
	--nino-on-black-muted: #7b7c7e;
	--nino-black-link: #3d82b1;
	--nino-black-border: #5f6161;
	--nino-black-focus: #00669a;
	--nino-black-disabled: #4c4d4d;
	--nino-black-shadow: rgb(15 23 42 / 12%);
	--nino-black-logo-light: none;
	--nino-black-logo-dark: block;
	--nino-brand: #4faae8;
	--nino-on-brand: #0b0e10;
	--nino-on-brand-muted: #273b4b;
	--nino-brand-link: #003d5f;
	--nino-brand-border: #475560;
	--nino-brand-focus: #005887;
	--nino-brand-disabled: #5e6972;
	--nino-brand-shadow: rgb(15 23 42 / 12%);
	--nino-brand-logo-light: block;
	--nino-brand-logo-dark: none;
	--nino-brand-safe: #147bb7;
	--nino-on-brand-safe: #fcfcfc;
	--nino-on-brand-safe-muted: #fcfcfc;
	--nino-brand-safe-link: #f9fdff;
	--nino-brand-safe-border: #c2d3df;
	--nino-brand-safe-focus: #a1d7ff;
	--nino-brand-safe-disabled: #a9b5be;
	--nino-brand-safe-shadow: rgb(15 23 42 / 12%);
	--nino-brand-safe-logo-light: none;
	--nino-brand-safe-logo-dark: block;
	--nino-accent-safe: #147bb7;
	--nino-on-accent-safe: #fcfcfc;
	--nino-on-accent-safe-muted: #fcfcfc;
	--nino-accent-safe-link: #f9fdff;
	--nino-accent-safe-border: #c2d3df;
	--nino-accent-safe-focus: #a1d7ff;
	--nino-accent-safe-disabled: #a9b5be;
	--nino-accent-safe-shadow: rgb(15 23 42 / 12%);
	--nino-accent-safe-logo-light: none;
	--nino-accent-safe-logo-dark: block;
	--nino-success: #438061;
	--nino-on-success: #fcfcfc;
	--nino-on-success-muted: #eefff5;
	--nino-success-link: #eefff5;
	--nino-success-border: #c7d2cb;
	--nino-success-focus: #7ee3b0;
	--nino-success-disabled: #acb4af;
	--nino-success-shadow: rgb(15 23 42 / 12%);
	--nino-success-logo-light: none;
	--nino-success-logo-dark: block;
	--nino-warning: #986d00;
	--nino-on-warning: #fcfcfc;
	--nino-on-warning-muted: #fffbf4;
	--nino-warning-link: #fffbf4;
	--nino-warning-border: #d9cfbd;
	--nino-warning-focus: #fcc863;
	--nino-warning-disabled: #b9b2a5;
	--nino-warning-shadow: rgb(15 23 42 / 12%);
	--nino-warning-logo-light: none;
	--nino-warning-logo-dark: block;
	--nino-danger: #cf4438;
	--nino-on-danger: #fcfcfc;
	--nino-on-danger-muted: #fffbfa;
	--nino-danger-link: #fffbfa;
	--nino-danger-border: #e8cac5;
	--nino-danger-focus: #ffc2b8;
	--nino-danger-disabled: #c4aeaa;
	--nino-danger-shadow: rgb(15 23 42 / 12%);
	--nino-danger-logo-light: none;
	--nino-danger-logo-dark: block;
	--nino-scrim: rgb(14 18 22 / 67%);
	/* A percentage of the visitor's browser default, never a px length - see
	   --base-size in Nino.css. A generated replacement for this file has to
	   keep it relative. */
	--nino-base-size: 100%;
	--nino-line-height: 1.5;
	--nino-measure: 120rem;
	--nino-space-1: 0.5rem;
	--nino-space-2: 1rem;
	--nino-space-3: 2rem;
	--nino-space-4: 3rem;
	--nino-space-5: 5rem;
	--nino-space-6: 8rem;
	--nino-radius-1: 0.1rem;
	--nino-radius-2: 0.2rem;
	--nino-radius-3: 0.4rem;
	--nino-radius-full: 999rem;
}

@media (min-width: 768px) {
	:root {
		--nino-base-size: 112.5%;
	}
}


/* ==== 2. the palette ==== */
:root {
	--nino-default: #ffffff;
	--nino-on-default: #0a0e0f;
	--nino-on-default-muted: #747778;
	--nino-default-link: #00829b;
	--nino-default-border: #6d6f70;
	--nino-default-focus: #00a2c0;
	--nino-default-disabled: #adafb0;
	--nino-default-shadow: rgb(15 23 42 / 12%);
	--nino-default-logo-light: block;
	--nino-default-logo-dark: none;
	--nino-alt: #dfeaee;
	--nino-on-alt: #0a0e0f;
	--nino-on-alt-muted: #67696a;
	--nino-alt-link: #007388;
	--nino-alt-border: #606263;
	--nino-alt-focus: #0092ac;
	--nino-alt-disabled: #9c9d9e;
	--nino-alt-shadow: rgb(15 23 42 / 12%);
	--nino-alt-logo-light: block;
	--nino-alt-logo-dark: none;
	--nino-tint: #d8f6ff;
	--nino-on-tint: #0a0e0f;
	--nino-on-tint-muted: #5d7177;
	--nino-tint-link: #00788f;
	--nino-tint-border: #5c696d;
	--nino-tint-focus: #0098b4;
	--nino-tint-disabled: #9ba6aa;
	--nino-tint-shadow: rgb(15 23 42 / 12%);
	--nino-tint-logo-light: block;
	--nino-tint-logo-dark: none;
	--nino-dark: #273032;
	--nino-on-dark: #fcfcfc;
	--nino-on-dark-muted: #929696;
	--nino-dark-link: #00a3c0;
	--nino-dark-border: #9b9e9e;
	--nino-dark-focus: #00829b;
	--nino-dark-disabled: #616262;
	--nino-dark-shadow: rgb(15 23 42 / 12%);
	--nino-dark-logo-light: none;
	--nino-dark-logo-dark: block;
	--nino-black: #0b1315;
	--nino-on-black: #fcfcfc;
	--nino-on-black-muted: #797d7d;
	--nino-black-link: #0088a1;
	--nino-black-border: #828585;
	--nino-black-focus: #006a7d;
	--nino-black-disabled: #4b4d4d;
	--nino-black-shadow: rgb(15 23 42 / 12%);
	--nino-black-logo-light: none;
	--nino-black-logo-dark: block;
	--nino-brand: #53bcd6;
	--nino-on-brand: #0a0e0f;
	--nino-on-brand-muted: #2f464d;
	--nino-brand-link: #004958;
	--nino-brand-border: #303e43;
	--nino-brand-focus: #006679;
	--nino-brand-disabled: #677377;
	--nino-brand-shadow: rgb(15 23 42 / 12%);
	--nino-brand-logo-light: block;
	--nino-brand-logo-dark: none;
	--nino-brand-safe: #008098;
	--nino-on-brand-safe: #fcfcfc;
	--nino-on-brand-safe-muted: #f7fdff;
	--nino-brand-safe-link: #f7fdff;
	--nino-brand-safe-border: #ffffff;
	--nino-brand-safe-focus: #62e0ff;
	--nino-brand-safe-disabled: #a2b7bc;
	--nino-brand-safe-shadow: rgb(15 23 42 / 12%);
	--nino-brand-safe-logo-light: none;
	--nino-brand-safe-logo-dark: block;
	--nino-accent-safe: #008098;
	--nino-on-accent-safe: #fcfcfc;
	--nino-on-accent-safe-muted: #f7fdff;
	--nino-accent-safe-link: #f7fdff;
	--nino-accent-safe-border: #ffffff;
	--nino-accent-safe-focus: #62e0ff;
	--nino-accent-safe-disabled: #a2b7bc;
	--nino-accent-safe-shadow: rgb(15 23 42 / 12%);
	--nino-accent-safe-logo-light: none;
	--nino-accent-safe-logo-dark: block;
	--nino-success: #438061;
	--nino-on-success: #fcfcfc;
	--nino-on-success-muted: #eefff5;
	--nino-success-link: #eefff5;
	--nino-success-border: #ffffff;
	--nino-success-focus: #42eaa2;
	--nino-success-disabled: #acb4af;
	--nino-success-shadow: rgb(15 23 42 / 12%);
	--nino-success-logo-light: none;
	--nino-success-logo-dark: block;
	--nino-warning: #986d00;
	--nino-on-warning: #fcfcfc;
	--nino-on-warning-muted: #fffbf4;
	--nino-warning-link: #fffbf4;
	--nino-warning-border: #ffffff;
	--nino-warning-focus: #ffc75a;
	--nino-warning-disabled: #b9b2a5;
	--nino-warning-shadow: rgb(15 23 42 / 12%);
	--nino-warning-logo-light: none;
	--nino-warning-logo-dark: block;
	--nino-danger: #cf4438;
	--nino-on-danger: #fcfcfc;
	--nino-on-danger-muted: #fffbfa;
	--nino-danger-link: #fffbfa;
	--nino-danger-border: #ffffff;
	--nino-danger-focus: #ffc2b8;
	--nino-danger-disabled: #c4aeaa;
	--nino-danger-shadow: rgb(15 23 42 / 12%);
	--nino-danger-logo-light: none;
	--nino-danger-logo-dark: block;
	--nino-scrim: rgb(11 19 21 / 67%);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-nino-mode="light"]) {
		--nino-default: #0d1518;
		--nino-on-default: #fcfcfc;
		--nino-on-default-muted: #7b7e7e;
		--nino-default-link: #008aa3;
		--nino-default-border: #838686;
		--nino-default-focus: #006b80;
		--nino-default-disabled: #4c4e4e;
		--nino-default-shadow: rgb(0 0 0 / 55%);
		--nino-default-logo-light: none;
		--nino-default-logo-dark: block;
		--nino-alt: #21292c;
		--nino-on-alt: #fcfcfc;
		--nino-on-alt-muted: #8b8f8f;
		--nino-alt-link: #009cb8;
		--nino-alt-border: #949797;
		--nino-alt-focus: #007c92;
		--nino-alt-disabled: #5a5c5c;
		--nino-alt-shadow: rgb(0 0 0 / 55%);
		--nino-alt-logo-light: none;
		--nino-alt-logo-dark: block;
		--nino-tint: #002831;
		--nino-on-tint: #fcfcfc;
		--nino-on-tint-muted: #788e94;
		--nino-tint-link: #0097b2;
		--nino-tint-border: #869599;
		--nino-tint-focus: #00788e;
		--nino-tint-disabled: #515a5d;
		--nino-tint-shadow: rgb(0 0 0 / 55%);
		--nino-tint-logo-light: none;
		--nino-tint-logo-dark: block;
		--nino-dark: #273032;
		--nino-on-dark: #fcfcfc;
		--nino-on-dark-muted: #929696;
		--nino-dark-link: #00a3c0;
		--nino-dark-border: #9b9e9e;
		--nino-dark-focus: #00829b;
		--nino-dark-disabled: #616262;
		--nino-dark-shadow: rgb(0 0 0 / 55%);
		--nino-dark-logo-light: none;
		--nino-dark-logo-dark: block;
		--nino-black: #03080a;
		--nino-on-black: #fcfcfc;
		--nino-on-black-muted: #747878;
		--nino-black-link: #00839b;
		--nino-black-border: #7d7f80;
		--nino-black-focus: #006578;
		--nino-black-disabled: #474949;
		--nino-black-shadow: rgb(0 0 0 / 55%);
		--nino-black-logo-light: none;
		--nino-black-logo-dark: block;
		--nino-brand: #53bcd6;
		--nino-on-brand: #0a0e0f;
		--nino-on-brand-muted: #2f464d;
		--nino-brand-link: #004958;
		--nino-brand-border: #303e43;
		--nino-brand-focus: #006679;
		--nino-brand-disabled: #677377;
		--nino-brand-shadow: rgb(0 0 0 / 55%);
		--nino-brand-logo-light: block;
		--nino-brand-logo-dark: none;
		--nino-brand-safe: #00d6fc;
		--nino-on-brand-safe: #0a0e0f;
		--nino-on-brand-safe-muted: #2e5762;
		--nino-brand-safe-link: #00596b;
		--nino-brand-safe-border: #354f56;
		--nino-brand-safe-focus: #00768d;
		--nino-brand-safe-disabled: #72858b;
		--nino-brand-safe-shadow: rgb(0 0 0 / 55%);
		--nino-brand-safe-logo-light: block;
		--nino-brand-safe-logo-dark: none;
		--nino-accent-safe: #00d6fc;
		--nino-on-accent-safe: #0a0e0f;
		--nino-on-accent-safe-muted: #2e5762;
		--nino-accent-safe-link: #00596b;
		--nino-accent-safe-border: #354f56;
		--nino-accent-safe-focus: #00768d;
		--nino-accent-safe-disabled: #72858b;
		--nino-accent-safe-shadow: rgb(0 0 0 / 55%);
		--nino-accent-safe-logo-light: block;
		--nino-accent-safe-logo-dark: none;
		--nino-success: #488666;
		--nino-on-success: #0b0e0c;
		--nino-on-success-muted: #04100a;
		--nino-success-link: #001107;
		--nino-success-border: #000000;
		--nino-success-focus: #003923;
		--nino-success-disabled: #404743;
		--nino-success-shadow: rgb(0 0 0 / 55%);
		--nino-success-logo-light: block;
		--nino-success-logo-dark: none;
		--nino-warning: #b38100;
		--nino-on-warning: #0f0d0a;
		--nino-on-warning-muted: #2d220b;
		--nino-warning-link: #312000;
		--nino-warning-border: #21190c;
		--nino-warning-focus: #553b00;
		--nino-warning-disabled: #595347;
		--nino-warning-shadow: rgb(0 0 0 / 55%);
		--nino-warning-logo-light: block;
		--nino-warning-logo-dark: none;
		--nino-danger: #d54a3d;
		--nino-on-danger: #100c0c;
		--nino-on-danger-muted: #210403;
		--nino-danger-link: #260000;
		--nino-danger-border: #000000;
		--nino-danger-focus: #6a0001;
		--nino-danger-disabled: #54413f;
		--nino-danger-shadow: rgb(0 0 0 / 55%);
		--nino-danger-logo-light: block;
		--nino-danger-logo-dark: none;
		--nino-scrim: rgb(3 8 10 / 64%);
	}
}

:root[data-nino-mode="dark"] {
	--nino-default: #0d1518;
	--nino-on-default: #fcfcfc;
	--nino-on-default-muted: #7b7e7e;
	--nino-default-link: #008aa3;
	--nino-default-border: #838686;
	--nino-default-focus: #006b80;
	--nino-default-disabled: #4c4e4e;
	--nino-default-shadow: rgb(0 0 0 / 55%);
	--nino-default-logo-light: none;
	--nino-default-logo-dark: block;
	--nino-alt: #21292c;
	--nino-on-alt: #fcfcfc;
	--nino-on-alt-muted: #8b8f8f;
	--nino-alt-link: #009cb8;
	--nino-alt-border: #949797;
	--nino-alt-focus: #007c92;
	--nino-alt-disabled: #5a5c5c;
	--nino-alt-shadow: rgb(0 0 0 / 55%);
	--nino-alt-logo-light: none;
	--nino-alt-logo-dark: block;
	--nino-tint: #002831;
	--nino-on-tint: #fcfcfc;
	--nino-on-tint-muted: #788e94;
	--nino-tint-link: #0097b2;
	--nino-tint-border: #869599;
	--nino-tint-focus: #00788e;
	--nino-tint-disabled: #515a5d;
	--nino-tint-shadow: rgb(0 0 0 / 55%);
	--nino-tint-logo-light: none;
	--nino-tint-logo-dark: block;
	--nino-dark: #273032;
	--nino-on-dark: #fcfcfc;
	--nino-on-dark-muted: #929696;
	--nino-dark-link: #00a3c0;
	--nino-dark-border: #9b9e9e;
	--nino-dark-focus: #00829b;
	--nino-dark-disabled: #616262;
	--nino-dark-shadow: rgb(0 0 0 / 55%);
	--nino-dark-logo-light: none;
	--nino-dark-logo-dark: block;
	--nino-black: #03080a;
	--nino-on-black: #fcfcfc;
	--nino-on-black-muted: #747878;
	--nino-black-link: #00839b;
	--nino-black-border: #7d7f80;
	--nino-black-focus: #006578;
	--nino-black-disabled: #474949;
	--nino-black-shadow: rgb(0 0 0 / 55%);
	--nino-black-logo-light: none;
	--nino-black-logo-dark: block;
	--nino-brand: #53bcd6;
	--nino-on-brand: #0a0e0f;
	--nino-on-brand-muted: #2f464d;
	--nino-brand-link: #004958;
	--nino-brand-border: #303e43;
	--nino-brand-focus: #006679;
	--nino-brand-disabled: #677377;
	--nino-brand-shadow: rgb(0 0 0 / 55%);
	--nino-brand-logo-light: block;
	--nino-brand-logo-dark: none;
	--nino-brand-safe: #00d6fc;
	--nino-on-brand-safe: #0a0e0f;
	--nino-on-brand-safe-muted: #2e5762;
	--nino-brand-safe-link: #00596b;
	--nino-brand-safe-border: #354f56;
	--nino-brand-safe-focus: #00768d;
	--nino-brand-safe-disabled: #72858b;
	--nino-brand-safe-shadow: rgb(0 0 0 / 55%);
	--nino-brand-safe-logo-light: block;
	--nino-brand-safe-logo-dark: none;
	--nino-accent-safe: #00d6fc;
	--nino-on-accent-safe: #0a0e0f;
	--nino-on-accent-safe-muted: #2e5762;
	--nino-accent-safe-link: #00596b;
	--nino-accent-safe-border: #354f56;
	--nino-accent-safe-focus: #00768d;
	--nino-accent-safe-disabled: #72858b;
	--nino-accent-safe-shadow: rgb(0 0 0 / 55%);
	--nino-accent-safe-logo-light: block;
	--nino-accent-safe-logo-dark: none;
	--nino-success: #488666;
	--nino-on-success: #0b0e0c;
	--nino-on-success-muted: #04100a;
	--nino-success-link: #001107;
	--nino-success-border: #000000;
	--nino-success-focus: #003923;
	--nino-success-disabled: #404743;
	--nino-success-shadow: rgb(0 0 0 / 55%);
	--nino-success-logo-light: block;
	--nino-success-logo-dark: none;
	--nino-warning: #b38100;
	--nino-on-warning: #0f0d0a;
	--nino-on-warning-muted: #2d220b;
	--nino-warning-link: #312000;
	--nino-warning-border: #21190c;
	--nino-warning-focus: #553b00;
	--nino-warning-disabled: #595347;
	--nino-warning-shadow: rgb(0 0 0 / 55%);
	--nino-warning-logo-light: block;
	--nino-warning-logo-dark: none;
	--nino-danger: #d54a3d;
	--nino-on-danger: #100c0c;
	--nino-on-danger-muted: #210403;
	--nino-danger-link: #260000;
	--nino-danger-border: #000000;
	--nino-danger-focus: #6a0001;
	--nino-danger-disabled: #54413f;
	--nino-danger-shadow: rgb(0 0 0 / 55%);
	--nino-danger-logo-light: block;
	--nino-danger-logo-dark: none;
	--nino-scrim: rgb(3 8 10 / 64%);
}

/* ==== 3. the type ==== */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/public/assets/fonts/poppins/300.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/public/assets/fonts/poppins/400.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/public/assets/fonts/poppins/700.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/public/fonts/open-sans-light.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/public/fonts/open-sans-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/public/fonts/open-sans-bold.woff2') format('woff2');
}

:root {
	--fontfamily-title: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-title-weight: 700;
	--font-title-size: 2.2rem;
	--card-title-scale: .8;
	--fontfamily-subtitle: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-subtitle-weight: 400;
	--font-subtitle-size: 1.5rem;
	--fontfamily-text: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-text-weight: 400;
	--font-text-size: 1.2rem;
	--fontfamily-button: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-button-weight: 400;
	--font-code-weight: normal;
}

/* ==== 4. the roles ==== */

/*	Basis.

	The neutral starting point - a plain white page, one blue accent, and
	every size straight off the framework scale.

	Colours here are assignments, never values. The --nino-* tokens this file
	reads are section 1's, and the palette the Design feature compiles over
	them solves every background/text pair against a contrast target; what
	this section decides is which surface each role sits on. A stylesheet that
	declares the tokens again recolours the site, and nothing below has to
	change.

	Three rules follow. Never write a literal colour into a role - a hex here
	is a pair nobody measured. Never pair across surfaces, because
	--color-section-alt-text belongs to --nino-on-alt and to nothing else. And
	never put text on --nino-brand: it is the first brand colour exactly as it
	was picked, so it is the surface with no contrast promise attached -
	--nino-brand-safe and --nino-accent-safe are the two brand colours made
	safe, and those are what carry ink. The second colour as it was picked is
	no surface at all: nothing in Nino.css reads it.	*/
:root {

	/* Brand. Three roles from two questions - is it the first brand colour or the
	   second, and is it the one that was picked or the one text survives on -
	   and the second colour as it was picked is left out, because nothing may be
	   written on it. --color-secondary is the primary exactly as it was picked
	   and is only ever shown; --color-primary is that same colour with its
	   lightness solved until the text on it clears the contrast target, and is
	   what every button and filled surface uses. --color-brand-alt is the second
	   colour playing the same part as --color-primary: filled with, written on,
	   and safe.

	   The palette used to publish one safe surface for whichever of the two
	   colours had been settled on, so setting a Secondary quietly moved every
	   button onto it and left no contrast-safe brand anywhere. Naming both is
	   what lets a look use two colours instead of choosing between them. */
	--color-primary: var(--nino-brand-safe);
	--color-primary-text: var(--nino-on-brand-safe);
	--color-secondary: var(--nino-brand);
	--color-brand-alt: var(--nino-accent-safe);
	--color-brand-alt-text: var(--nino-on-accent-safe);

	/* ...and the brand as ink, which is a third value again: --color-primary
	   is solved so text survives *on* it, and says nothing about what it does
	   written on a page surface. Every ground gets the one the palette solved
	   for it, so a price, a stat, an outline button or an info alert clears the
	   text target wherever it lands */
	--color-accent-default: var(--nino-default-link);
	--color-accent-alt: var(--nino-alt-link);
	--color-accent-tint: var(--nino-tint-link);
	--color-accent-dark: var(--nino-dark-link);
	--color-accent-black: var(--nino-black-link);


	/* ...and the focus ring, which is the same role again with a different
	   target: 3:1 rather than 4.5, per WCAG 2.2 SC 1.4.11. Each ground takes
	   the ring solved for the surface it actually paints - the line above it
	   names that surface, and a ring solved against a different one is the
	   cross-surface pairing this whole split exists to prevent */
	--color-focus-default: var(--nino-default-focus);
	--color-focus-alt: var(--nino-alt-focus);
	--color-focus-tint: var(--nino-tint-focus);
	--color-focus-dark: var(--nino-dark-focus);
	--color-focus-black: var(--nino-black-focus);

	/* The one role that is meant to fail the text target - see Nino.css.
	   Solved against the page ground, which is where a form sits */
	--color-disabled: var(--nino-default-disabled);

	/* Page ground */
	--color-background: var(--nino-default);
	--color-text: var(--nino-on-default);
	--color-title: var(--nino-default-link);
	--color-subtitle: var(--nino-on-default-muted);
	--color-border: var(--nino-default-border);
	--color-header-bg: var(--nino-default);

	/* The border of each ground, handed down with the roles that follow it:
	   inside a section, a column or a card of a ground, --color-border is the
	   one solved for that surface. The two brand grounds are filled with the
	   safe colours, so their line is solved against those. Nino.css declares
	   the seven as the border of the page; the delivered theme.css is this
	   file compiled at the defaults, so both assign them */
	--color-border-default: var(--nino-default-border);
	--color-border-alt: var(--nino-alt-border);
	--color-border-tint: var(--nino-tint-border);
	--color-border-dark: var(--nino-dark-border);
	--color-border-black: var(--nino-black-border);
	--color-border-primary: var(--nino-brand-safe-border);
	--color-border-brand-alt: var(--nino-accent-safe-border);

	/* The logo, per ground, as the border is: [logo] draws a picture for a light
	   ground and one for a dark ground, and a ground that paints itself says
	   which is seen - a pair of display values, block and none, that Nino.css
	   sets beside --color-ground. The palette solves the pair of each surface
	   from the ink that was solved for it, so the page flips with the mode and
	   a brand ground with the colour it was given, and these are the surfaces
	   the roles sit on: the same ones as the bg and the text above. Nino.css
	   declares the pairs it has without a design layer - the page and the light
	   grounds showing the picture for a light ground, the others the one for a
	   dark ground - and the delivered theme.css is this file compiled at the
	   defaults, so both assign them */
	--color-logo-light: var(--nino-default-logo-light);
	--color-logo-dark: var(--nino-default-logo-dark);
	--color-section-default-logo-light: var(--nino-default-logo-light);
	--color-section-default-logo-dark: var(--nino-default-logo-dark);
	--color-section-alt-logo-light: var(--nino-alt-logo-light);
	--color-section-alt-logo-dark: var(--nino-alt-logo-dark);
	--color-section-tint-logo-light: var(--nino-tint-logo-light);
	--color-section-tint-logo-dark: var(--nino-tint-logo-dark);
	--color-section-dark-logo-light: var(--nino-dark-logo-light);
	--color-section-dark-logo-dark: var(--nino-dark-logo-dark);
	--color-section-black-logo-light: var(--nino-black-logo-light);
	--color-section-black-logo-dark: var(--nino-black-logo-dark);
	--color-primary-logo-light: var(--nino-brand-safe-logo-light);
	--color-primary-logo-dark: var(--nino-brand-safe-logo-dark);
	--color-brand-alt-logo-light: var(--nino-accent-safe-logo-light);
	--color-brand-alt-logo-dark: var(--nino-accent-safe-logo-dark);
	--color-error-logo-light: var(--nino-danger-logo-light);
	--color-error-logo-dark: var(--nino-danger-logo-dark);
	--color-success-logo-light: var(--nino-success-logo-light);
	--color-success-logo-dark: var(--nino-success-logo-dark);
	--color-warning-logo-light: var(--nino-warning-logo-light);
	--color-warning-logo-dark: var(--nino-warning-logo-dark);
	--color-footer-logo-light: var(--nino-black-logo-light);
	--color-footer-logo-dark: var(--nino-black-logo-dark);

	/* The scrim over a cover image. The palette solves it against the worst
	   photograph it could be asked to cover - a white one - so this is the
	   lightest scrim that still carries the ink on top of it, and the most
	   of the picture a look can show. A theme may darken it for mood; it
	   must not lighten it. */
	--color-background-dim: var(--nino-scrim);

	/* Footer bands */
	--color-footer-bg-main: var(--nino-black);
	--color-footer-text-main: var(--nino-on-black-muted);
	--color-footer-bg-legal: var(--nino-black);
	--color-footer-text-legal: var(--nino-on-black-muted);

	/* Sections - the four grounds a page alternates between */
	--color-section-default-bg: var(--nino-default);
	--color-section-default-text: var(--nino-on-default);
	--color-section-alt-bg: var(--nino-alt);
	--color-section-alt-text: var(--nino-on-alt);
	/*	The fifth ground: the page with the brand in it rather than a near-grey
		step away from it. Quiet enough to read a whole section on, coloured
		enough to read as chosen. */
	--color-section-tint-bg: var(--nino-tint);
	--color-section-tint-text: var(--nino-on-tint);
	--color-section-dark-bg: var(--nino-dark);
	--color-section-dark-text: var(--nino-on-dark);
	--color-section-black-bg: var(--nino-black);
	--color-section-black-text: var(--nino-on-black);

	/* Code */
	--color-code-bg: var(--nino-black);
	--color-code-text: var(--nino-on-black);
	--color-code-border: var(--nino-black-border);

	/* Status - each one is a surface with its own ink, never the brand's */
	--color-error: var(--nino-danger);
	--color-error-text: var(--nino-on-danger);
	--color-success: var(--nino-success);
	--color-success-text: var(--nino-on-success);
	--color-warning: var(--nino-warning);
	--color-warning-text: var(--nino-on-warning);

	/* The type is the compiler's: the five font roles (--fontfamily-<role>,
	   --font-<role>-weight and -size) and the @font-face rules behind them
	   are written from the setup's fonts, a section of their own before
	   this one. A webface is a file this unit ships, not a value
	   anything can generate */

	/* Sizes are assignments too. The raster is section 1's: the framework's
	   own sizes, frozen there like the colours, where a hand-tuned block here
	   used to spell them out one number at a time. The type scale is not in
	   it: Nino.css derives --text-1 to --text-6 from the size of the text
	   role, so a fixed size in the fonts table moves the whole ladder */
	--base-size: var(--nino-base-size);
	--line-height: var(--nino-line-height);

	--space-1: var(--nino-space-1);
	--space-2: var(--nino-space-2);
	--space-3: var(--nino-space-3);
	--space-4: var(--nino-space-4);
	--space-5: var(--nino-space-5);
	--space-6: var(--nino-space-6);

	--radius: var(--nino-radius-2);
	--radius-small: var(--nino-radius-1);
	--radius-large: var(--nino-radius-3);

	/*	The reference unit. Every size below is the framework's own value,
	reached through the raster rather than restated - so this stylesheet
	reproduces Nino.css exactly, which is the guarantee the whole design
	layer rests on: switching it on must not move a project that has not
	asked for anything.	*/
	--card-img-max-width: 12vw;
	--card-img-max-height: 20vh;
	--grid-max-width: var(--nino-measure);
}


/* ==== 5. the root size ==== */
:root { --nino-base-size: 100%; }
@media (min-width: 768px) { :root { --nino-base-size: 112.5%; } }

/* ==== 6. the page ==== */
:root {
	--radius-surface: 0rem;
	--radius-surface-alt: 0rem;
	--radius-cover: var(--radius-surface);
	--radius-cover-default: standard;
	--radius-row: var(--radius-surface);
	--radius-row-default: standard;
	--radius-column: var(--radius-surface);
	--radius-column-default: standard;
	--radius-tile: var(--radius-surface);
	--radius-tile-default: standard;
	--radius-card: var(--radius-surface);
	--radius-card-default: standard;
	--radius-image: var(--radius-surface);
	--radius-image-default: standard;
}

/* ==== 7. header: regular (nav least, height default, space less, logo default, ground less, border-size least, border-color default, shadow default, position more, cta less, behaviour default, nav-case default, nav-hover fade) ==== */
/*	@name				Regular
 *	@description	A bar on the page ground with a rule under it, five rem tall. The one a fresh Nino installs.
 *	@description-de	Eine Leiste auf dem Grund der Seite mit einer Linie darunter, fünf rem hoch. Die, die ein frisches Nino mitbringt.
 *
 *	@knob	nav		Size of the links of the navigation
 *	@knob	height		How tall the bar is
 *	@knob	space		Space between the logo, the links and the edges
 *	@knob	logo		Width of the logo
 *	@knob	ground		What the bar stands on
 *	@knob	border-size	Width of the border
 *	@knob	border-color	Colour of the border
 *	@knob	shadow		Shadow of the bar
 *	@knob	position	Where the navigation stands
 *	@knob	cta		Visibility and size of the button of the header
 *	@knob	behaviour	What the bar does when the page is scrolled
 *	@knob	nav-case	Capitals in the links of the navigation
 *
 *	@style		nav-hover	Hover of the links
 *	@style-de	nav-hover	Hover der Links
 *
 *	The name and the description are what the Design panel lists this
 *	variant as. Every library file carries them; a file without a @name
 *	is offered under its own file name instead.
 *
 *	The twelve knobs are ladders, declared below, the middle of each this set as it
 *	was before it had any: nav is a factor on the size of the links of the
 *	navigation, height the height of the bar - and of the room main leaves under
 *	it -, space a factor on the gaps between the logo, the links and the edges,
 *	and ground a choice of three: the ground and the ink of the page, this set's
 *	own, and the dark pair of the palette. What the text, the icons, the links and
 *	the lines of the bar are read in comes with it, as aspects of the ground
 *	(--header-ground-ink, -title, -accent, -focus, -border, -logo-light and -logo-dark), and is put on the
 *	header as the roles Nino.css reads - so the bar is legible on each of the
 *	three. The menu that opens over the page is the page's again, as in Nino.css.
 *
 *	The other four: border-size is the width of the border the bar has, border-color a
 *	choice of three for its colour - the ink of its ground, the border of its ground and the
 *	brand -, position a choice of three for where the navigation stands - left, centre or
 *	right of the bar - and cta a choice of three for the button of the header - hidden,
 *	small, or as large as a button is. The button is scaled by --header-cta-scale, the
 *	factor its font, its padding and its corners are drawn with.
 *
 *	logo is a factor on the width of the logo, and shadow the shadow the bar casts on the
 *	page: none at the middle, a soft one and a strong one beyond it, in the palette's colour
 *	for a shadow. behaviour is a choice of three for what the bar does when the page is
 *	scrolled: it goes with the page, it is fixed and folds away on the way down - as
 *	Nino.css has it - or it is fixed and stays. Its rungs are the position of the header
 *	(--header-behaviour), and beside them stand the greatest height the bar has once the page
 *	is scrolled down (-collapse), a factor on the height it keeps there (-keep) and a factor
 *	on the room main leaves under it (-clear): a bar that goes with the page needs none.
 *
 *	The twelfth, nav-case, is a toggle: two rungs, none and uppercase, and the links
 *	of the navigation - in the bar, and in the menu that opens over the page - are
 *	set in the one its position picks.
 *
 *	The style, nav-hover, is the hover of the links of the navigation from 768 px.
 *	None leaves what this set draws: the line that grows under a link. Fade and Pill,
 *	the files nav-hover-fade.css and nav-hover-pill.css beside this one, replace that
 *	line - the others dim in the first, a pill stands behind the link in the second -
 *	and read the roles of the bar, so they follow its ground.
 */

:root {
	/*	The size of the links of the navigation, as a factor of the size this set sets them in	*/
	--header-nav--least:	.8;
	--header-nav--less:	.9;
	--header-nav--default:	1;
	--header-nav--more:	1.15;
	--header-nav--most:	1.3;

	/*	The height of the bar, once: the bar is that tall, and main, which the fixed
			header would cover, starts below it. The middle is five rem	*/
	--header-height--least:	calc( 5rem * .7 );
	--header-height--less:	calc( 5rem * .85 );
	--header-height--default:	5rem;
	--header-height--more:	calc( 5rem * 1.25 );
	--header-height--most:	calc( 5rem * 1.5 );

	/*	The gaps between the logo, the links and the edges, as a factor of what this set has	*/
	--header-space--least:	.5;
	--header-space--less:	.75;
	--header-space--default:	1;
	--header-space--more:	1.5;
	--header-space--most:	2;

	/*	The width of the logo, as a factor of the width this set gives it	*/
	--header-logo--least:	.7;
	--header-logo--less:	.85;
	--header-logo--default:	1;
	--header-logo--more:	1.25;
	--header-logo--most:	1.5;

	/*	What the bar stands on: the ground of the page, this set's own, the dark pair of the palette	*/
	--header-ground--less:	var(--color-background);
	--header-ground--default:	var(--color-background);
	--header-ground--more:	var(--color-section-dark-bg);

	/*	The ink of the text on it	*/
	--header-ground-ink--less:	var(--color-text);
	--header-ground-ink--default:	var(--color-text);
	--header-ground-ink--more:	var(--color-section-dark-text);

	/*	The title role, which the icon of the menu is drawn in	*/
	--header-ground-title--less:	var(--color-title);
	--header-ground-title--default:	var(--color-title);
	--header-ground-title--more:	var(--color-section-dark-text);

	/*	The accent role: the link that is current	*/
	--header-ground-accent--less:	var(--color-accent);
	--header-ground-accent--default:	var(--color-accent);
	--header-ground-accent--more:	var(--color-accent-dark);

	/*	The ring of the focus	*/
	--header-ground-focus--less:	var(--color-focus);
	--header-ground-focus--default:	var(--color-focus);
	--header-ground-focus--more:	var(--color-focus-dark);

	/*	The line under it	*/
	--header-ground-border--less:	var(--color-border);
	--header-ground-border--default:	var(--color-border);
	--header-ground-border--more:	var(--color-border-dark);

	/*	Which picture of the logo is seen: the one for a light ground or the one for a dark ground, as the pair of the ground says it - the page's, this set's own, the dark pair of the palette	*/
	--header-ground-logo-light--less:	var(--color-logo-light);
	--header-ground-logo-light--default:	var(--color-logo-light);
	--header-ground-logo-light--more:	var(--color-section-dark-logo-light);
	--header-ground-logo-dark--less:	var(--color-logo-dark);
	--header-ground-logo-dark--default:	var(--color-logo-dark);
	--header-ground-logo-dark--more:	var(--color-section-dark-logo-dark);

	--header-border-size--least:	0;
	--header-border-size--less:	.5px;
	--header-border-size--default: 1px;
	--header-border-size--more:	2px;
	--header-border-size--most:	6px;

	--header-border-color--less:	var(--header-ground-ink);
	--header-border-color--default:	var(--header-ground-border);
	--header-border-color--more:	var(--color-primary);

	/*	The shadow the bar casts on the page: none at the middle - this set casts none of its own - a soft one and a strong one beyond it, in the palette's colour for a shadow	*/
	--header-shadow--least:	none;
	--header-shadow--less:	none;
	--header-shadow--default:	none;
	--header-shadow--more:	0 .5rem 1.5rem var(--nino-default-shadow);
	--header-shadow--most:	0 .75rem 2rem var(--nino-default-shadow), 0 .125rem .5rem var(--nino-default-shadow);

	--header-position--less: 0 auto 0 0;
	--header-position--default: 0 auto;
	--header-position--more: 0 0 0 auto;

	--header-position-cta--less: 0;
	--header-position-cta--default: clamp(7rem, 9vw, 9rem);
	--header-position-cta--more: 0;

	--header-cta--less: none;
	--header-cta--default: block;
	--header-cta--more: block;

	--header-cta-scale--less: .7;
	--header-cta-scale--default: .7;
	--header-cta-scale--more: 1;

	/*	What the bar does when the page is scrolled: it goes with the page, it is fixed and folds away on the way down - as Nino.css has it - or it is fixed and stays. The rung is the position of the header; beside it stand what follows from it: the greatest height of the bar once the page is scrolled down, how much of its height it keeps there (a factor, 0 being folded) and a factor on the room main leaves under it, which a bar in the flow of the page needs none of	*/
	--header-behaviour--less:	relative;
	--header-behaviour--default:	fixed;
	--header-behaviour--more:	fixed;
	--header-behaviour-collapse--less:	none;
	--header-behaviour-collapse--default:	0;
	--header-behaviour-collapse--more:	none;
	--header-behaviour-keep--less:	1;
	--header-behaviour-keep--default:	0;
	--header-behaviour-keep--more:	1;
	--header-behaviour-clear--less:	0;
	--header-behaviour-clear--default:	1;
	--header-behaviour-clear--more:	1;

	/*	The case of the links of the navigation: as they are written, or in capitals	*/
	--header-nav-case--default: none;
	--header-nav-case--more: uppercase;
}

.nino-frame-header {
	position: var(--header-behaviour);
	border-bottom: solid var(--header-border-color) var(--header-border-size);
	--color-title: var(--header-ground-title);
	--color-accent: var(--header-ground-accent);
	--color-focus: var(--header-ground-focus);
	--color-border: var(--header-ground-border);
	--logo-light: var(--header-ground-logo-light);
	--logo-dark: var(--header-ground-logo-dark);
}

.nino-frame-header .nino-grid-row {
	padding-right: calc( var(--grid-gutter) * var(--header-space) );
	padding-left: calc( var(--grid-gutter) * var(--header-space) );
}

.nino-frame-header .nino-scroll-header {
	min-height: var(--header-height);
	opacity: 1;
	color: var(--header-ground-ink);
	background-color: var(--header-ground);
	box-shadow: var(--header-shadow);
	display: flex;
}

body.nino-scroll-atf .nino-frame-header .nino-scroll-header {
	background-color: var(--header-ground);
}

/*	What Nino.css folds away on the way down - the bar's height, its room and its line - this set takes back, or says again, as the behaviour has it. One rule more specific than the kernel's, with the same exception: not while the focus is in the bar	*/
body.nino-scroll-down .nino-frame-header .nino-scroll-header:where(:not(:has(:focus-visible))) {
	max-height: var(--header-behaviour-collapse);
	min-height: calc( var(--header-height) * var(--header-behaviour-keep) );
}

.nino-frame-header .nino-logo {
	width: calc( clamp(7.5rem, 10vw, 10rem) * var(--header-logo) );
	height: auto;
	min-width: 0;
	min-height: 24px;
	display: flex;
	align-items: center;
	margin: 0;
	background-image: none;
}
.nino-frame-header-cta {
	display: var(--header-cta);
	min-width: var(--header-position-cta);
}
.nino-frame-header-cta a {
	display: block;
	font-size: calc( var(--font-button-size) * var(--header-cta-scale) );
	padding: calc( var(--space-1) * var(--header-cta-scale) ) calc( var(--space-2) * var(--header-cta-scale) );
	border-radius: calc( var(--radius) * var(--header-cta-scale) );
}

.nino-frame-header .nino-frame-header-nav {
	margin: var(--header-position);
}

.nino-frame-header .nino-nav-content li a {
	text-transform: var(--header-nav-case);
}

.nino-frame-header .nino-nav-burger > button > svg {
	fill: var(--color-title);
}

.nino-frame-header .nino-nav-burger > button[aria-expanded="true"] > svg {
	fill: var(--color-title-default);
}


body main {
	padding-top: calc( ( var(--header-height) + var(--nino-header-grow, 0px) ) * var(--header-behaviour-clear) );
}

body main:has(> .nino-cover:first-child),
body main:has(> .nino-wrap > .nino-cover:first-child),
body main:has(> .nino-parallex:first-child),
body main:has(> .nino-wrap > .nino-parallex:first-child) {
	padding-top: 0;
}

@media (min-width: 768px) {
	.nino-frame-header .nino-nav-content li a {
		position: relative;
		padding: calc( var(--space-1) * var(--header-space) );
		font-size: calc( var(--fontsize-btn) * var(--header-nav) );
		letter-spacing: .04em;
	}

	.nino-frame-header .nino-nav-content ul {
		gap: calc( var(--space-2) * var(--header-space) );
	}

	.nino-frame-header .nino-nav-content li a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		background-color: var(--color-secondary);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform .2s ease;
	}

	.nino-frame-header .nino-nav-content li a:hover::after,
	.nino-frame-header .nino-nav-content li a:focus::after,
	.nino-frame-header .nino-nav-content li a.nino-is-active::after {
		transform: scaleX(1);
		transform-origin: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nino-frame-header .nino-nav-content li a::after {
		transition: none;
	}
}

/* -- style nav-hover: fade -- */
/*	@name				Fade
 *	@name-de			Abblenden
 *	@description	The links dim to 60 % while the pointer or the focus is on one of them; the one it is on stays whole, and the current one is set in the accent of the bar.
 *	@description-de	Die Links blenden auf 60 % ab, solange der Zeiger oder der Fokus auf einem von ihnen steht; der, auf dem er steht, bleibt voll, und der aktuelle steht im Akzent der Leiste.
 *
 *	The hover of the links of the navigation for the style nav-hover (see style.css). It takes
 *	over the size, the spacing and the ink of the links from the Regular header and replaces
 *	the line that grows under a link: that line is gone, and so is its movement. In its place
 *	the other links dim while one is under the pointer or has the keyboard focus, to 60 %,
 *	which keeps the ink legible on the ground of the bar, and the current link is set in
 *	--header-ground-accent, the role of the link that is current, so that the page it stands
 *	on stays marked at rest. The focus ring is the kernel's and stays as it is.
 *
 *	From 768 px, like the link rules of the set: below it the menu is the page's.
 */

@media (min-width: 768px) {
	.nino-frame-header .nino-nav-content li a {
		transition: opacity .2s ease;
	}

	.nino-frame-header .nino-nav-content li a::after {
		content: none;
	}

	.nino-frame-header .nino-nav-content li a.nino-is-active {
		color: var(--header-ground-accent);
	}

	.nino-frame-header .nino-nav-content ul:has(a:is(:hover, :focus-visible)) li a:not(:is(:hover, :focus-visible, .nino-is-active)) {
		opacity: .6;
	}
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.nino-frame-header .nino-nav-content li a {
		transition: none;
	}
}


/* ==== 8. footer: one-legal-row (scale default, height default, space default, ground default, border-size default, border-color default, position more, nav-case default) ==== */
/*	@name				One legal row
 *	@description	Copyright, the footer navigation and the legal links on a single row. The smallest footer there is.
 *	@description-de	Copyright, die Footer-Navigation und die rechtlichen Links in einer einzigen Zeile. Der kleinste Footer, den es gibt.
 *
 *	@knob	scale		Type size of the footer
 *	@knob	height		Space above and below the content of the footer
 *	@knob	space		Space between its columns, lines and links
 *	@knob	ground		What the footer stands on
 *	@knob	border-size	Weight of the line over the footer
 *	@knob	border-color	Colour of that line
 *	@knob	position	Where the content of the footer stands
 *	@knob	nav-case	Capitals in the links of the navigation
 *
 *	The name and the description are what the Design panel lists this
 *	variant as. Every library file carries them; a file without a @name
 *	is offered under its own file name instead.
 *
 *	The eight knobs are ladders, declared below, the middle of each this set as it
 *	is: scale is a factor on the type size of the footer, height
 *	a factor on the room above and below its content, space a factor on the gaps
 *	between its columns, lines and links, and ground a choice of three: the ground
 *	and the ink of the page, this set's own, and the dark pair of the palette. What
 *	the text, the links and the lines of the footer are read in comes with it, as
 *	aspects of the ground (--footer-ground-ink, -subtitle, -title, -accent, -focus,
 *	-border, -logo-light and -logo-dark), and is put on the footer as the roles Nino.css reads - so the
 *	footer is legible on each of the three.
 *
 *	The line over the footer is two knobs. border-size is its weight, drawn as the top
 *	border of the frame that paints the ground, and border-color a choice of three for its
 *	colour: the ink of the ground, the line of the ground - where it stands at the middle -
 *	and the brand. Of the three, the first two are roles of the footer's own ground, so
 *	a ground of another kind brings its line with it.
 *
 *	The seventh, position, is a choice of three for where the content stands. The row has
 *	its three cells across the whole width at the middle, the template: the copyright, the
 *	navigation and the locale in a quarter, a half and a quarter. Left and centre let
 *	each cell be as wide as its content (--footer-position-basis), put the gap between
 *	them (--footer-position-gap) and pack them at the left edge or in the middle of the row.
 *
 *	The eighth, nav-case, is a toggle: two rungs, none and uppercase, and the links of
 *	the navigation and the legal links are set in the one it is on.
 */

:root {
	/*	The type size of the footer, as a factor of the one it has: .8em of the text round it, and the sizes this set gives its parts	*/
	--footer-scale--least:	.8;
	--footer-scale--less:	.9;
	--footer-scale--default:	1;
	--footer-scale--more:	1.15;
	--footer-scale--most:	1.3;

	/*	The room above and below the content, as a factor of what this set has	*/
	--footer-height--least:	.5;
	--footer-height--less:	.75;
	--footer-height--default:	1;
	--footer-height--more:	1.5;
	--footer-height--most:	2;

	/*	The gaps between its columns, lines and links, as a factor of what this set has	*/
	--footer-space--least:	.5;
	--footer-space--less:	.75;
	--footer-space--default:	1;
	--footer-space--more:	1.5;
	--footer-space--most:	2;

	/*	What the footer stands on: the ground of the page, this set's own - the pair the palette has for the legal band -, the dark pair of the palette	*/
	--footer-ground--less:	var(--color-background);
	--footer-ground--default:	var(--color-footer-bg-legal);
	--footer-ground--more:	var(--color-section-dark-bg);

	/*	The ink of the text on it	*/
	--footer-ground-ink--less:	var(--color-text);
	--footer-ground-ink--default:	var(--color-footer-text-legal);
	--footer-ground-ink--more:	var(--color-section-dark-text);

	/*	The subtitle role	*/
	--footer-ground-subtitle--less:	var(--color-subtitle);
	--footer-ground-subtitle--default:	var(--color-subtitle);
	--footer-ground-subtitle--more:	var(--color-section-dark-text);

	/*	The title role	*/
	--footer-ground-title--less:	var(--color-title);
	--footer-ground-title--default:	var(--color-title);
	--footer-ground-title--more:	var(--color-section-dark-text);

	/*	The accent role	*/
	--footer-ground-accent--less:	var(--color-accent);
	--footer-ground-accent--default:	var(--color-accent-black);
	--footer-ground-accent--more:	var(--color-accent-dark);

	/*	The ring of the focus	*/
	--footer-ground-focus--less:	var(--color-focus);
	--footer-ground-focus--default:	var(--color-focus-black);
	--footer-ground-focus--more:	var(--color-focus-dark);

	/*	The lines in it	*/
	--footer-ground-border--less:	var(--color-border);
	--footer-ground-border--default:	var(--color-border-black);
	--footer-ground-border--more:	var(--color-border-dark);

	/*	The weight of the line over the footer: none at the middle - this set draws no line of its own - a hairline and a rule beyond it	*/
	--footer-border-size--least:	0;
	--footer-border-size--less:	0;
	--footer-border-size--default:	0;
	--footer-border-size--more:	1px;
	--footer-border-size--most:	2px;

	/*	The colour of that line: the ink of the ground the footer stands on, the line of that ground, the brand - so a dark ground brings its own line	*/
	--footer-border-color--less:	var(--footer-ground-ink);
	--footer-border-color--default:	var(--footer-ground-border);
	--footer-border-color--more:	var(--color-primary);

	/*	Where the content stands: the cells of the row are packed at the left edge or in the middle - as wide as their content, with a gap between them - and fill the row as the template has it, a quarter, a half and a quarter in between	*/
	--footer-position--less:	start;
	--footer-position--default:	start;
	--footer-position--more:	center;
	--footer-position-basis--less:	max-content;
	--footer-position-basis--default:	auto;
	--footer-position-basis--more:	max-content;
	--footer-position-gap--less:	1;
	--footer-position-gap--default:	0;
	--footer-position-gap--more:	1;

	/*	Which picture of the logo is seen: the one for a light ground or the one for a dark ground, as the pair of the ground says it - the page's, this set's own, the dark pair of the palette	*/
	--footer-ground-logo-light--less:	var(--color-logo-light);
	--footer-ground-logo-light--default:	var(--color-footer-logo-light);
	--footer-ground-logo-light--more:	var(--color-section-dark-logo-light);
	--footer-ground-logo-dark--less:	var(--color-logo-dark);
	--footer-ground-logo-dark--default:	var(--color-footer-logo-dark);
	--footer-ground-logo-dark--more:	var(--color-section-dark-logo-dark);

	/*	The case of the links of the navigation: as they are written, or in capitals	*/
	--footer-nav-case--default: none;
	--footer-nav-case--more: uppercase;
}

footer {
	font-size: calc( .8em * var(--footer-scale) );
	--color-subtitle: var(--footer-ground-subtitle);
	--color-title: var(--footer-ground-title);
	--color-accent: var(--footer-ground-accent);
	--color-focus: var(--footer-ground-focus);
	--color-border: var(--footer-ground-border);
	--logo-light: var(--footer-ground-logo-light);
	--logo-dark: var(--footer-ground-logo-dark);
}

.nino-footer-legal {
	padding: calc( var(--space-1) * var(--footer-height) ) calc( var(--space-3) * var(--footer-space) );
	background: var(--footer-ground);
	border-top: solid var(--footer-border-color) var(--footer-border-size);
	color: var(--footer-ground-ink);
	--color-ink: var(--footer-ground-ink);
	--color-ground: var(--footer-ground);
}

.nino-footer-legal .nino-grid-row {
	justify-content: var(--footer-position);
	column-gap: calc( var(--space-3) * var(--footer-space) * var(--footer-position-gap) );
}
.nino-footer-legal .nino-grid-row > * {
	flex-basis: var(--footer-position-basis);
}
.nino-footer-nav .nino-footer-title {
	display:none;
}
.nino-footer-nav .nino-nav-content li a {
	text-transform: var(--footer-nav-case);
}
.nino-footer-nav {
	display:flex;
	flex-wrap: wrap;
	gap: calc( var(--space-3) * var(--footer-space) );
	row-gap: var(--space-1);
	align-items: center;
}
.nino-footer-copyright {
	display:flex;
	align-items: center;
}

@media (max-width: 767.98px) {
	.nino-footer-nav {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ==== 9. section: regular (quiet default, loud default, title default, subtitle default, title-tracking least, space default, rule full, rule-length more, title-shadow default, dim default, title-ground default, rule-color more, align default, measure default, title-case default, subtitle-case default, title-ink default, subtitle-ink default) ==== */
/*	@name			Regular
 *	@description	The framework as it is: the middle of every ladder. The hero, the sections, their titles and the covers as Nino.css draws them.
 *	@description-de	Das Framework, wie es ist: die Mitte jeder Leiter. Hero, Sektionen, ihre Titel und die Cover, wie Nino.css sie zeichnet.
 *
 *	@knob	quiet				Size of a quiet title, subtitle and text
 *	@knob	loud				Size of a loud title, subtitle and text
 *	@knob	title				Size of the title of a section
 *	@knob	subtitle			Size of the subtitle of a section
 *	@knob	title-tracking		Letter-spacing of the title of a section
 *	@knob	space				Space above and below the content of a section
 *	@knob	rule				Rule under the title of a section
 *	@knob	rule-length			How long the rule under the title is
 *	@knob	title-shadow		Shadow of the title of a section
 *	@knob	dim					How dark the scrim of a dimmed cover is
 *	@knob	title-ground		Ground behind the title of a section
 *	@knob	rule-color			Colour of the rule under the title
 *	@knob	align				Where the title, the subtitle and the text stand
 *	@knob	measure				Width of the column of the subtitle and of the text
 *	@knob	title-case		Capitals in the title of a section
 *	@knob	subtitle-case	Capitals in the subtitle of a section
 *	@knob	title-ink			Colour of the title of a section
 *	@knob	subtitle-ink		Colour of the subtitle of a section
 *
 *	Regular is the starting point, not a design. Every value it declares is the
 *	framework's own, so a page under it looks as it does under Nino.css alone -
 *	and every one of them is a ladder, so each knob has something to
 *	reach. The middle of a ladder is Nino.css, the others are the steps to
 *	each side of it. Where Nino.css changes a number at 768px the ladder does the
 *	same, in a media query of its own.
 *
 *	Two rules for a set:
 *
 *	  - Only the classes of this template: the hero, the section, the column
 *	    on a ground and the cover. A set of buttons does not touch a section
 *	    title, however tempting, and a section set does not touch a card -
 *	    where it has to read a value of the card family it reads it by its
 *	    token, and says so in its opening comment.
 *	  - Colours through the roles, never as literals: var(--color-title),
 *	    var(--color-primary), var(--color-section-tint-bg). A ground is a
 *	    class of Nino.css (nino-section--alt, nino-grid--counter ...) that
 *	    sets the pair and the roles solved against it; a set never paints
 *	    one, and never compares one ground with another.
 *
 *	A value a knob should reach declares its five steps instead of one
 *	value, named after the part and the knob (--section-space--least,
 *	--less, --default, --more, --most), and the rule reads the knob
 *	(var(--section-space)). The knobs of Nino.css itself - the factors
 *	of a section's title and subtitle and of the variants, the hero's among
 *	them, since the hero is the loud variant - need no rule: the set only
 *	points them at the ladder. The rule under a section title is drawn by the
 *	set as a background of the title, so that it can be short, and so is what the
 *	knobs of the words say (see the end of the file); the scrim
 *	of a dimmed cover is the other thing that has a rule: it reads the ladder
 *	of the dimming, on the two pseudo-elements Nino.css draws it with and on
 *	the block of a picture behind a section, a row and a column, which carry
 *	one of their own. The two cases are toggles of two rungs, none and uppercase,
 *	and read by a rule each: the title of a section and the hero's, the subtitle
 *	of a section and the hero's. The card family has the same names
 *	and a fourth, Box, and a theme names a sensible pair. Copy this file
 *	under a name of your own and start there.
 *
 *	The knobs of the title, the rule and the words are read by the rules at the end of the file, and they leave what the page aligns by a class
 *	of its own (nino-text-*) alone.
 */

:root {
	/*	How much smaller a --quiet variant is than the class it varies, and how
		much larger a --loud one: .85 and 1.2. The quiet ones stay under 1 and
		the loud ones over it, whatever the position. The hero is the loud
		variant - the size of the title role and of the subtitle role times the
		loud number - so the loud ladder sizes it too	*/
	--section-quiet--least: 				.6;
	--section-quiet--less: 					.75;
	--section-quiet--default: 			.85;
	--section-quiet--more: 					.92;
	--section-quiet--most: 					.97;

	--section-loud--least: 					1.05;
	--section-loud--less: 					1.1;
	--section-loud--default: 				1.2;
	--section-loud--more: 					1.35;
	--section-loud--most: 					1.6;

	/*	The factors Nino.css multiplies the size of the title role by in a section
		title, and the size of the subtitle role by in a section subtitle: 1 and 1.
		The steps run from .7 to 1.5 for a title and from .8 to 1.3 for a subtitle,
		each a tenth to a quarter of the size from the next	*/
	--section-title--least:	.7;
	--section-title--less:	.85;
	--section-title--default:	1;
	--section-title--more:	1.25;
	--section-title--most:	1.5;

	--section-subtitle--least:	.8;
	--section-subtitle--less:	.9;
	--section-subtitle--default:	1;
	--section-subtitle--more:	1.15;
	--section-subtitle--most:	1.3;

	/*	The space above and below what is in a section: --space-4, and --space-5
		from 768px. Two steps of the scale to either side	*/
	--section-space--least: 	var(--space-2);
	--section-space--less: 		var(--space-3);
	--section-space--default: var(--space-4);
	--section-space--more: 		var(--space-5);
	--section-space--most: 		var(--space-6);

	/*	The rule under the title of a section: a grade: none, as Nino.css has it, at the first
		rung, then 1px, 2px, 4px and 6px at 16px, in rem. Nino.css leaves six times its
		thickness of air between the title and the rule; here the air is the line plus the
		smaller of six times the line and 1.25rem, so that a thick rule stays with its title	*/
	--section-rule--default:	0px;
	--section-rule--light:	.0625rem;
	--section-rule--medium:	.125rem;
	--section-rule--strong:	.25rem;
	--section-rule--full:	.375rem;

	/*	The scrim over a dimmed cover, a dimmed parallax and the picture of a dimmed
		section, row or column. The middle is the one the palette solves for it
		(--color-background-dim): the lightest scrim that still carries the ink on
		the lightest picture there could be. The two steps under it let more of the
		picture through - the scrim at three quarters and at half of its strength,
		for a picture that is dark already - and the ink on them is no longer
		held to that; the two over it deepen it toward the black of the palette, by
		a quarter and by a half	*/
	--section-dim--least: 		color-mix( in srgb, var(--color-background-dim) 50%, transparent );
	--section-dim--less: 		color-mix( in srgb, var(--color-background-dim) 75%, transparent );
	--section-dim--default: 	var(--color-background-dim);
	--section-dim--more: 		color-mix( in srgb, var(--color-background-dim) 75%, var(--color-section-black-bg) );
	--section-dim--most: 		color-mix( in srgb, var(--color-background-dim) 50%, var(--color-section-black-bg) );

	/*	The letter-spacing of the title of a section and of the hero, as a step from what the template gives it: nothing at the middle, so that the middle is
		the template, whichever it is. Tighter on the two steps below it, looser on the two above	*/
	--section-title-tracking--least:	-.04em;
	--section-title-tracking--less:	-.02em;
	--section-title-tracking--default:	0em;
	--section-title-tracking--more:	.06em;
	--section-title-tracking--most:	.15em;

	/*	How long the rule under the title is: the length of the line at the foot of the title - short, the width of the title as Nino.css draws
		it, or the width of its words, which is the width of the title then (its aspect is that width, as a maximum). The line is a background
		of the title at every length, as thick as the rule knob says	*/
	--section-rule-length--less: 			3rem;
	--section-rule-length--default: 	100%;
	--section-rule-length--more: 			100%;

	--section-rule-length-fit--less: 		none;
	--section-rule-length-fit--default: none;
	--section-rule-length-fit--more: 		fit-content;

	/*	The shadow of the words of the title of a section and of the hero, a grade: none, the kernel's, then four that grow - the soft one, the strong one the sets had before, and
		two stronger still - in the black of the palette, thinned	*/
	--section-title-shadow--default:	none;
	--section-title-shadow--light:	0 .04em .12em color-mix( in srgb, var(--color-section-black-bg) 30%, transparent );
	--section-title-shadow--medium:	0 .06em .25em color-mix( in srgb, var(--color-section-black-bg) 55%, transparent );
	--section-title-shadow--strong:	0 .09em .35em color-mix( in srgb, var(--color-section-black-bg) 70%, transparent );
	--section-title-shadow--full:	0 .12em .5em color-mix( in srgb, var(--color-section-black-bg) 85%, transparent );

	/*	The ground behind the words of the title of a section and of the hero: none, as Nino.css has it, soft or full. The ladder is the share of the colour of the title
		in the ground, 12% and 100%, over what the title stands on; its aspects are the share of the ground in the words (the words of a
		full ground are the ground's own), the factor of the room round them and of the radius, and the width: a title with a ground is as wide
		as its words. The roles are read where the title stands, so that each ground is its own	*/
	--section-title-ground--less: 			12%;
	--section-title-ground--default: 	0%;
	--section-title-ground--more: 			100%;

	--section-title-ground-ink--less: 		0%;
	--section-title-ground-ink--default: 0%;
	--section-title-ground-ink--more: 		100%;

	--section-title-ground-fit--less: 		1;
	--section-title-ground-fit--default: 0;
	--section-title-ground-fit--more: 		1;

	--section-title-ground-width--less: 		fit-content;
	--section-title-ground-width--default: auto;
	--section-title-ground-width--more: 		fit-content;

	/*	The colour of the rule under the title, read where the title stands: the ink of the ground, the border of the ground, which is the
		rule as Nino.css has it, or the brand as ink on it. The ladder is the share of the ink and its aspect the share of the border in what
		is left; what neither takes is the brand	*/
	--section-rule-color--less: 			100%;
	--section-rule-color--default: 	0%;
	--section-rule-color--more: 			0%;

	--section-rule-color-border--less: 			0%;
	--section-rule-color-border--default: 	100%;
	--section-rule-color-border--more: 			0%;

	/*	Where the title and the subtitle stand: left, centred - as Nino.css has them - or right. The aspects say where the boxes that are
		narrower than their column stand (a title as wide as its words, a column of text) and where the text of a section and the hero stand,
		which have no alignment of their own: they take the one they stand in, and match-parent says so	*/
	--section-align--less: 		left;
	--section-align--default: center;
	--section-align--more: 		right;

	--section-align-flow--less: 			left;
	--section-align-flow--default: 	match-parent;
	--section-align-flow--more: 			right;

	--section-align-margin--less: 		0 auto;
	--section-align-margin--default: auto;
	--section-align-margin--more: 		auto 0;

	--section-align-column--less: 		0 auto;
	--section-align-column--default: 0;
	--section-align-column--more: 		auto 0;

	/*	The width of the column of the subtitle and of the text: narrower, the template's own, wider. A text that says loud has a measure of
		its own in Nino.css, which the knob moves as well	*/
	--section-measure--less: 			40rem;
	--section-measure--default: 	none;
	--section-measure--more: 			56rem;

	--section-measure-loud--less: 			40rem;
	--section-measure-loud--default: 	52rem;
	--section-measure-loud--more: 			56rem;

	/*	The case of the title and of the subtitle: as they are written, or in capitals	*/
	--section-title-case--default: 		none;
	--section-title-case--more: 			uppercase;

	--section-subtitle-case--default: 	none;
	--section-subtitle-case--more: 		uppercase;
}

@media (min-width: 768px) {
	:root {
		--section-space--least: 	var(--space-3);
		--section-space--less: 		var(--space-4);
		--section-space--default: var(--space-5);
		--section-space--more: 		var(--space-6);
		--section-space--most: 		calc( var(--space-6) * 1.25 );
	}
}

/*	The four numbers and the rule Nino.css reads by name	*/
:root {
	--section-title-scale: var(--section-title);
	--section-subtitle-scale: var(--section-subtitle);
	--section-line: var(--section-rule);
	--scale-quiet: var(--section-quiet);
	--scale-loud: var(--section-loud);
}

/*	The case of the titles and of the subtitles, the hero's with them: the hero is the loud variant of the same	*/
.nino-section-title,
.nino-hero-title {
	text-transform: var(--section-title-case);
}
.nino-section-subtitle,
.nino-hero-subtitle {
	text-transform: var(--section-subtitle-case);
}

/*	The space of a section, unless the section says its own: the spacing
	classes of Nino.css (nino-pt-3, nino-p-2 ...) come last in its stylesheet so
	that they win, and a rule of a design layer that came after them would
	beat them - so a section that names a padding is left alone.
	What a set spaces it spaces times the whitespace of the page, as Nino.css
	does - --whitespace-scale for an area, --whitespace-text for the room under
	a text, and 1 where the framework says none - since a rule that came after
	Nino.css and said the space without the factor would stop the whitespace
	of the page at the set. A section of tiles (.nino-tiles) is the other kind
	of section and has no padding of its own - its tiles have the room, and
	the tiles set says how much - so it is left alone as well. The exclusion
	stands in :where(), which has no weight	*/
.nino-section:where(:not(.nino-tiles, [class*="nino-pt-"], [class*="nino-p-"])) {
	padding-top: calc( var(--section-space) * var(--whitespace-scale, 1) );
}
.nino-section:where(:not(.nino-tiles, [class*="nino-pb-"], [class*="nino-p-"])) {
	padding-bottom: calc( var(--section-space) * var(--whitespace-scale, 1) );
}

/*	The scrim, as the ladder of the dimming says it. What Nino.css draws it with:
	the ::before of a dimmed cover and of a dimmed parallax, and for a section, a
	row and a column that have a picture behind them - and so no cover to draw one
	with - the ::after of the block of the picture. A card draws one of its own and
	is the card family's, the picture of the image component is the component's	*/
.nino-parallex--dim::before,
.nino-cover--dim::before,
.nino-section--dim > .nino-section-bg::after,
.nino-grid-row--dim > .nino-grid-row-bg::after,
.nino-grid--dim > .nino-grid-bg::after {
	background-color: var(--section-dim);
}

/* ---- the title, the rule and the words ---- */

/*	The letter-spacing and the shadow of the title of a section and of the hero	*/
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud) {
	letter-spacing: var(--section-title-tracking);
	text-shadow: var(--section-title-shadow);
}

/*	The ground behind the words of a title, a share of its colour and of the ground in its words (the roles are read where the title stands)
	and the room round it - none at the middle - and the width: a title with a ground is as wide as its words	*/
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud):where(:not(.nino-tiles *)) {
	background-color: color-mix( in srgb, var(--color-title) var(--section-title-ground), transparent );
	border-radius: calc( var(--radius) * var(--section-title-ground-fit) );
	width: var(--section-title-ground-width);
}
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud):where(:not([class*="nino-ink--"], .nino-tiles *)) {
	color: color-mix( in srgb, var(--color-ground) var(--section-title-ground-ink), var(--color-title) );
}

/*	The ink of a title and of a subtitle, the hero's with them, is the tone the knob selects: the colour of the words of the title (and the colour the
	ground behind it is a share of), the colour of the subtitle. At the middle the tone is the one Nino.css gives the ground the title stands on, so that
	nothing changes where no tone is chosen. A title or a subtitle that says an ink of its own (nino-ink--accent, nino-ink--muted) keeps it, and a section
	of tiles is the tiles set's: its titles and subtitles are read there	*/
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud):where(:not([class*="nino-ink--"], .nino-tiles *)) {
	background-color: color-mix( in srgb, var(--section-title-ink) var(--section-title-ground), transparent );
	color: color-mix( in srgb, var(--color-ground) var(--section-title-ground-ink), var(--section-title-ink) );
}
:is(.nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-ink--"], .nino-tiles *)) {
	color: var(--section-subtitle-ink);
}
/*	The two inks a title may say - the brand and the muted one - take the share of the ground in the words as well, so that a full ground does not leave
	them in the colour of the ground	*/
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud).nino-ink--accent:where(:not(.nino-tiles *)) {
	color: color-mix( in srgb, var(--color-ground) var(--section-title-ground-ink), var(--color-accent) );
}
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud).nino-ink--muted:where(:not(.nino-tiles *)) {
	color: color-mix( in srgb, var(--color-ground) var(--section-title-ground-ink), color-mix(in srgb, currentColor 80%, transparent) );
}
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud):where(:not([class*="nino-p-"], [class*="nino-pt-"], [class*="nino-pl-"], [class*="nino-pr-"], .nino-tiles *)) {
	padding-top: calc( .15em * var(--section-title-ground-fit) );
	padding-inline: calc( .5em * var(--section-title-ground-fit) );
}
:is(.nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud):where(:not([class*="nino-p-"], [class*="nino-pb-"])) {
	padding-bottom: calc( .15em * var(--section-title-ground-fit) );
}

/*	The rule under the title is a background of it, as long as the length says, in the colour of the rule: the line Nino.css draws as the border is
	drawn here, so that it can be short, and the air under the title is the line plus the smaller of the six times the line Nino.css leaves and 1.25rem, so that a thick rule stays with its title	*/
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud):where(:not([class*="nino-p-"], [class*="nino-pb-"])) {
	padding-bottom: calc( .15em * var(--section-title-ground-fit) + var(--section-rule) + min( var(--section-rule) * 6, 1.25rem ) );
}
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud) {
	border-bottom-width: 0;
	background-image: linear-gradient( color-mix( in srgb, var(--color-ink) var(--section-rule-color), color-mix( in srgb, var(--color-border) var(--section-rule-color-border), var(--color-accent) ) ) 0 100% );
	background-repeat: no-repeat;
	background-size: var(--section-rule-length) var(--section-rule);
	background-position: var(--section-align) bottom;
	max-width: var(--section-rule-length-fit);
}

/*	The alignment: where the title and the subtitle stand, where the text of a section does, and the hero. Only where the page says nothing of
	its own - a nino-text-* class on the element, or on what it stands in, is the page's, and Nino.css carries the one on what it stands in into the
	titles and the subtitles. The boxes that are narrower than their column stand where the alignment says: a title as wide as its words and the
	column of a text take the margins of the knob	*/
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud):where(:not([class*="nino-text-"])) {
	text-align: var(--section-align);
}
:is(.nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-text-"])) {
	text-align: var(--section-align-flow);
}
:is(.nino-section-text, .nino-section-text--quiet, .nino-section-text--loud):where(:not([class*="nino-text-"], [class*="nino-text-"] *)) {
	text-align: var(--section-align-flow);
}
/*	The margins of the boxes stand down for the classes that align at every width - left, centre and right - and for what stands in one. A class that aligns
	from a breakpoint leaves a box where the alignment says below it, and the mirrors after this rule take it from the breakpoint on	*/
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud):where(:not(.nino-text-left, .nino-text-center, .nino-text-right, :is(.nino-text-left, .nino-text-center, .nino-text-right) *, [class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
	margin-inline: var(--section-align-margin);
}
:is(.nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not(.nino-text-left, .nino-text-center, .nino-text-right, :is(.nino-text-left, .nino-text-center, .nino-text-right) *, [class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
	margin-inline: var(--section-align-column);
}

/*	What the page aligns by a class stands where the class says: a box narrower than its column takes the margins of the alignment, and the
	rule under a title its place	*/
.nino-text-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
	margin-inline: auto;
}
.nino-text-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
	margin-inline: auto 0;
}
.nino-text-left :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-left {
	background-position: left bottom;
}
.nino-text-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-center {
	background-position: center bottom;
}
.nino-text-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-right {
	background-position: right bottom;
}
/*	A class that aligns from a breakpoint moves the boxes the way the class alone does: Nino.css has the ancestor form for every step, so the mirrors follow it - the boxes of the titles, the
	subtitles, the texts and the hero stand where the words stand, and the rule under a title with them, whether the class is on the element or on what it stands in. Each step names the elements of
	the rule above and what they stand in; a step that says left takes the boxes back to the margin of the left edge, and its rules come in the order of Nino.css, left, centre, right	*/
@media (min-width: 640px) {
	.nino-text-s-left :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-s-left:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: 0;
	}
	.nino-text-s-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-s-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto;
	}
	.nino-text-s-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-s-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto 0;
	}
	.nino-text-s-left :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-s-left {
		background-position: left bottom;
	}
	.nino-text-s-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-s-center {
		background-position: center bottom;
	}
	.nino-text-s-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-s-right {
		background-position: right bottom;
	}
}
@media (min-width: 768px) {
	.nino-text-m-left :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-m-left:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: 0;
	}
	.nino-text-m-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-m-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto;
	}
	.nino-text-m-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-m-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto 0;
	}
	.nino-text-m-left :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-m-left {
		background-position: left bottom;
	}
	.nino-text-m-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-m-center {
		background-position: center bottom;
	}
	.nino-text-m-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-m-right {
		background-position: right bottom;
	}
}
@media (min-width: 1024px) {
	.nino-text-l-left :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-l-left:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: 0;
	}
	.nino-text-l-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-l-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto;
	}
	.nino-text-l-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-l-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto 0;
	}
	.nino-text-l-left :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-l-left {
		background-position: left bottom;
	}
	.nino-text-l-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-l-center {
		background-position: center bottom;
	}
	.nino-text-l-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-l-right {
		background-position: right bottom;
	}
}
@media (min-width: 1280px) {
	.nino-text-xl-left :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-xl-left:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: 0;
	}
	.nino-text-xl-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-xl-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto;
	}
	.nino-text-xl-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud, .nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet, .nino-section-text--loud, .nino-hero-title, .nino-hero-title--quiet, .nino-hero-title--loud, .nino-hero-subtitle, .nino-hero-subtitle--quiet, .nino-hero-subtitle--loud).nino-text-xl-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto 0;
	}
	.nino-text-xl-left :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-xl-left {
		background-position: left bottom;
	}
	.nino-text-xl-center :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-xl-center {
		background-position: center bottom;
	}
	.nino-text-xl-right :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud),
	:is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud).nino-text-xl-right {
		background-position: right bottom;
	}
}

/*	The width of the column of the subtitle and of the text. The text that says loud has the measure of its own, after the others	*/
.nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud, .nino-section-text, .nino-section-text--quiet {
	max-width: var(--section-measure);
}
.nino-section-text--loud {
	max-width: var(--section-measure-loud);
}

/*	The colour of the title and of the subtitle of a section is the tone of the page on the ground they stand on, so the rung of an ink is declared on every
	element (see Nino.css): the title role and the subtitle role are re-pointed by a dark section, a brand section and the rest on their own, and the rung
	is read where the words stand. The rung is the tone this set gives: the role the framework gives the words, which a knob replaces with a tone of its own	*/
:root, :root * {
	--section-title-ink--default:		var(--color-title);
	--section-subtitle-ink--default:	var(--color-subtitle);
}


/* ==== 10. tiles: regular (title default, subtitle default, text default, title-tracking default, space default, gap default, place default, dim default, hover default, title-ink default, subtitle-ink default) ==== */
/*	@name			Regular
 *	@description	The tiles of a section of tiles as Nino.css draws them: the room inside a tile, no gap between tiles, the words in the middle. The middle of every ladder.
 *	@description-de	Die Kacheln einer Kachel-Sektion, wie Nino.css sie zeichnet: der Platz in einer Kachel, kein Abstand zwischen den Kacheln, die Worte in der Mitte. Die Mitte jeder Leiter.
 *
 *	@knob	title			Size of the title of a tile
 *	@knob	subtitle		Size of the subtitle of a tile
 *	@knob	text			Size of the words of a tile
 *	@knob	title-tracking	Letter-spacing of the title of a tile
 *	@knob	space			Room inside a tile
 *	@knob	gap				Gap between the tiles
 *	@knob	place			Where the words of a tile stand in it
 *	@knob	dim				How dark the scrim of a dimmed tile is
 *	@knob	hover			What the picture of a linked tile does under the pointer
 *	@knob	title-ink		Colour of the title of a tile
 *	@knob	subtitle-ink	Colour of the subtitle of a tile
 *
 *	A tiles section is the second kind of section: full-width tiles, each a picture or a colour with a few words on it
 *	(.nino-tiles in the markup, the columns of its row the tiles). This is the starting point for it, as library/section/regular.css is
 *	for the content kind: every value it declares is the framework's own, so that a page under it looks as it does under Nino.css
 *	alone, and every one of them is a ladder, so each knob has something to reach. The middle of a ladder is Nino.css, the others are the
 *	steps to each side of it, and where Nino.css changes a number at 768px the ladder does the same, in a media query of its own.
 *
 *	The set touches the classes of a tile and of a section of tiles only - nothing of the content section, the card or the hero. A title
 *	in a tile is a section title, and what the section set says of a title stands; what is said here is said inside .nino-tiles, one class
 *	heavier. The sizes, the room, the gap and where the words stand are what Nino.css reads by name (--tiles-title-scale, --tiles-padding,
 *	--tiles-gap and --tiles-place): the set points them at the ladders, and the gap and the place are selected by the compiler under
 *	the very names Nino.css reads, so that the set declares neither. What it has rules for is the letter-spacing of the title, the scrim of
 *	a dimmed tile and the hover of a linked tile, which is a zoom of its picture - the framework's gentle zoom at the middle, none at the
 *	first position and, at the third, the zoom and a lift of the tile - only where the visitor has not asked for less motion. The lift is the
 *	hover knob (--tiles-hover) and the zoom an aspect of it (--tiles-hover-zoom).
 *
 *	Copy this file under a name of your own and start there.
 */

:root {
	/*	The size of the title, the subtitle and the words of a tile, times its role: 1 each, as Nino.css has them. The steps run from .7 to 1.5 for a title,
		from .8 to 1.3 for a subtitle and for the words	*/
	--tiles-title--least:	.7;
	--tiles-title--less:	.85;
	--tiles-title--default:	1;
	--tiles-title--more:	1.25;
	--tiles-title--most:	1.5;

	--tiles-subtitle--least:	.8;
	--tiles-subtitle--less:	.9;
	--tiles-subtitle--default:	1;
	--tiles-subtitle--more:	1.15;
	--tiles-subtitle--most:	1.3;

	--tiles-text--least:	.8;
	--tiles-text--less:	.9;
	--tiles-text--default:	1;
	--tiles-text--more:	1.15;
	--tiles-text--most:	1.3;

	/*	The letter-spacing of the title of a tile, as a step from what the template gives it: nothing at the middle. Tighter on the two steps below it,
		looser on the two above	*/
	--tiles-title-tracking--least:	-.04em;
	--tiles-title-tracking--less:	-.02em;
	--tiles-title-tracking--default:	0em;
	--tiles-title-tracking--more:	.06em;
	--tiles-title-tracking--most:	.15em;

	/*	The room inside a tile: --space-3, and --space-4 from 768px, as Nino.css has it. Two steps of the scale to either side	*/
	--tiles-space--least: 		var(--space-1);
	--tiles-space--less: 			var(--space-2);
	--tiles-space--default: 	var(--space-3);
	--tiles-space--more: 			var(--space-4);
	--tiles-space--most: 			var(--space-5);

	/*	The gap between the tiles, where the row names none: none, as Nino.css has it, at the first rung, then four steps of the scale, a grade. The colour of
		the section shows in it. Selected by the compiler as --tiles-gap, the property Nino.css reads	*/
	--tiles-gap--default:	0px;
	--tiles-gap--light:	var(--space-1);
	--tiles-gap--medium:	var(--space-2);
	--tiles-gap--strong:	var(--space-3);
	--tiles-gap--full:	var(--space-4);

	/*	Where the words of a tile stand in it, which has the room: at the start, in the middle - as Nino.css has it - or at the end. A class of the tile
		(nino-stack-start, -center, -end) says otherwise. Selected by the compiler as --tiles-place, the property Nino.css reads	*/
	--tiles-place--less: 			start;
	--tiles-place--default: 	center;
	--tiles-place--more: 			end;

	/*	The scrim over the picture of a dimmed tile. The middle is the one the palette solves for it (--color-background-dim): the lightest scrim that
		still carries the ink on the lightest picture there could be. The two steps under it let more of the picture through - the scrim at three quarters
		and at half of its strength - and the two over it deepen it toward the black of the palette, by a quarter and by a half	*/
	--tiles-dim--least: 		color-mix( in srgb, var(--color-background-dim) 50%, transparent );
	--tiles-dim--less: 		color-mix( in srgb, var(--color-background-dim) 75%, transparent );
	--tiles-dim--default: 	var(--color-background-dim);
	--tiles-dim--more: 		color-mix( in srgb, var(--color-background-dim) 75%, var(--color-section-black-bg) );
	--tiles-dim--most: 		color-mix( in srgb, var(--color-background-dim) 50%, var(--color-section-black-bg) );

	/*	What a linked tile does under the pointer: its picture grows - the framework's gentle zoom, the number it gives a picture that asks for a hover, at
		the middle and at the third position, and not at all at the first - and at the third the tile rises by a quarter of a rem. The rise is the knob and the
		zoom an aspect of it	*/
	--tiles-hover--less: 			0 0;
	--tiles-hover--default: 	0 0;
	--tiles-hover--more: 			0 -.25rem;

	--tiles-hover-zoom--less: 			1;
	--tiles-hover-zoom--default: 		1.04;
	--tiles-hover-zoom--more: 			1.04;
}

@media (min-width: 768px) {
	:root {
		--tiles-space--least: 	var(--space-2);
		--tiles-space--less: 		var(--space-3);
		--tiles-space--default: var(--space-4);
		--tiles-space--more: 		var(--space-5);
		--tiles-space--most: 		var(--space-6);
	}
}

/*	The numbers Nino.css reads by name. The gap and the place are selected under their own names by the compiler	*/
:root {
	--tiles-title-scale: var(--tiles-title);
	--tiles-subtitle-scale: var(--tiles-subtitle);
	--tiles-text-scale: var(--tiles-text);
	--tiles-padding: var(--tiles-space);
}

/*	The letter-spacing of the title of a tile	*/
.nino-tiles :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud) {
	letter-spacing: var(--tiles-title-tracking);
}

/*	The ink of the title and of the subtitle of a tile is the tone the knob selects, read where the words stand: on a tile with a picture, in the roles of the
	black ground. At the middle it is the one Nino.css gives them, so that nothing changes where no tone is chosen. A title or a subtitle that says an ink of its
	own (nino-ink--accent, nino-ink--muted) keeps it	*/
.nino-tiles :is(.nino-section-title, .nino-section-title--quiet, .nino-section-title--loud):where(:not([class*="nino-ink--"])) {
	color: var(--tiles-title-ink);
}
.nino-tiles :is(.nino-section-subtitle, .nino-section-subtitle--quiet, .nino-section-subtitle--loud):where(:not([class*="nino-ink--"])) {
	color: var(--tiles-subtitle-ink);
}

/*	The scrim over the picture of a dimmed tile, as the ladder of the dimming says it	*/
.nino-tiles .nino-grid--dim > .nino-grid-bg::after {
	background-color: var(--tiles-dim);
}

/*	The hover of the picture of a linked tile: it grows inside the block that cuts it, and at the third position the tile rises - the pointer is the
	tile's, and not the picture's, which the words cover. The transition of the tile carries the animation's three properties with the time and the
	easing Nino.css gives them, so that a tile hovered while it arrives goes on arriving. Only where the visitor has not asked for less motion	*/
@media (prefers-reduced-motion: no-preference) {
	.nino-tiles .nino-grid--linked > .nino-grid-bg img {
		transition: transform .3s ease;
	}
	.nino-tiles .nino-grid--linked:hover > .nino-grid-bg img,
	.nino-tiles .nino-grid--linked:has(a.nino-stretch:focus-visible) > .nino-grid-bg img {
		transform: scale(var(--tiles-hover-zoom));
	}
	.nino-tiles .nino-grid--linked:hover {
		translate: var(--tiles-hover);
		transition: translate .2s ease,
			opacity var(--vpa-duration) cubic-bezier(0.5, 0, 0.7, 1),
			transform var(--vpa-duration) cubic-bezier(0.5, 0, 0.7, 1),
			filter var(--vpa-duration) cubic-bezier(0.5, 0, 0.7, 1);
	}
}

/*	The colour of the title and of the subtitle of a tile is the tone of the page on the ground the words stand on, so the rung of an ink is declared on every
	element (see Nino.css): a tile with a picture re-points the roles to the black ground, and the rung is read where the words stand. The rung is the tone this
	set gives: the role the framework gives the words, which a knob replaces with a tone of its own	*/
:root, :root * {
	--tiles-title-ink--default:		var(--color-title);
	--tiles-subtitle-ink--default:	var(--color-subtitle);
}


/* ==== 11. card: regular (title less, subtitle less, title-tracking least, space default, border least, shadow default, tone default, title-ground default, hover default, align default, title-case default, subtitle-case default, title-ink default, subtitle-ink default) ==== */
/*	@name			Regular
 *	@description	The framework as it is: the middle of every ladder. Cards as Nino.css draws them.
 *	@description-de	Das Framework, wie es ist: die Mitte jeder Leiter. Karten, wie Nino.css sie zeichnet.
 *
 *	@knob	title		Size of the title of a card
 *	@knob	subtitle	Size of the subtitle of a card
 *	@knob	title-tracking		Letter-spacing of the title of a card
 *	@knob	space		Space inside a card and between its parts
 *	@knob	border		Line round a card that has a ground
 *	@knob	shadow		Shadow of a card
 *	@knob	tone		Colour the shadow is drawn in
 *	@knob	title-ground		Ground behind the title of a card
 *	@knob	hover		What a card does under the pointer
 *	@knob	align				Where the words and the button of a card stand
 *	@knob	title-case	Capitals in the title of a card
 *	@knob	subtitle-case	Capitals in the subtitle of a card
 *	@knob	title-ink		Colour of the title of a card
 *	@knob	subtitle-ink	Colour of the subtitle of a card
 *
 *	Regular is the starting point, not a design. Every value it declares is the
 *	framework's own, so a page under it looks as it does under Nino.css alone -
 *	and every one of them is a ladder, so each knob has something to reach: the
 *	five values of a scale, the middle of them Nino.css and the others two steps
 *	to each side, or the three of a choice. Where Nino.css changes a number at
 *	768px the ladder does the same, in a media query of its own.
 *
 *	Two rules for a set:
 *
 *	  - Only the classes of this template: the card and its parts. A set of
 *	    buttons does not touch a card title, however tempting, and a card set
 *	    does not touch a section - where it has to read a value of the section
 *	    family it reads it by its token, and says so in its opening comment.
 *	  - Colours through the roles, never as literals: var(--color-title),
 *	    var(--color-primary), var(--color-section-tint-bg). A ground is a
 *	    class of Nino.css (nino-card--alt, nino-card--counter ...) that sets
 *	    the pair and the roles solved against it; a set never paints one, and
 *	    never compares one ground with another.
 *
 *	A value a knob should reach declares its steps instead of one value,
 *	named after the part and the knob (--card-space--least, --less,
 *	--default, --more, --most), and the rule reads the knob (var(--card-space)).
 *	The knobs of Nino.css itself - the factors of a card's title and subtitle,
 *	the shadow of a card - need no rule: the set only points them at the
 *	ladder. A knob that is more than one value declares one more ladder for
 *	each, named after the knob and an aspect of it (--card-hover-shadow--less
 *	...), as long as the knob's own: the hover is a movement and a shadow, and
 *	they move together. A choice is declared under less, default and more.
 *
 *	The tone is the colour of the shadow - the page's ink thinned, the palette's
 *	own shadow colour, which is the middle, or the brand colour thinned - and the
 *	ladder of the shadow reads it where it names a colour. The hover is for the
 *	card the pointer can mean as a whole: a card that is a link (.nino-card--linked),
 *	of which Nino.css stretches the link of its title over the whole card. A card
 *	whose title alone is a link is not stretched, the pointer means its title, and
 *	it does not move. This set does nothing under the pointer by itself, so the
 *	middle is as little as the first position; the third lifts the card by a
 *	quarter of a rem with the strongest step of the shadow, and only where the
 *	visitor has not asked for less motion. The two cases are toggles of two rungs,
 *	none and uppercase, read by a rule each: the title and the subtitle of a card.
 *	The section family has the same
 *	names, but for Box, and a theme names a sensible pair.
 *	Copy this file under a name of your own and start there.
 */

:root {
	/*	The factors Nino.css multiplies the size of the title role by in a card
		title, 5 / 6 and from 768px 25 / 32, and the size of the subtitle role by in
		a card subtitle, 1. The steps are a section's, taken times the number
		Nino.css has for the title, so that the middle is the card as it is	*/
	--card-title--least:	calc(.7 * 5 / 6);
	--card-title--less:	calc(.85 * 5 / 6);
	--card-title--default:	calc(5 / 6);
	--card-title--more:	calc(1.25 * 5 / 6);
	--card-title--most:	calc(1.5 * 5 / 6);

	--card-subtitle--least:	.8;
	--card-subtitle--less:	.9;
	--card-subtitle--default:	1;
	--card-subtitle--more:	1.15;
	--card-subtitle--most:	1.3;

	/*	Twice the padding of a card's content, and the space under its title,
		subtitle and description. The picture above them has half of it. The
		scale ends below --space-1, so the least is half of that	*/
	--card-space--least: 		calc( var(--space-1) * .5 );
	--card-space--less: 		var(--space-1);
	--card-space--default: var(--space-2);
	--card-space--more: 		var(--space-3);
	--card-space--most: 		var(--space-4);

	/*	The line round a card that names a ground - a plain card has none. The
		half pixel is a hairline where the screen can draw one, and a line of
		1px where it cannot	*/
	--card-border--least:	0px;
	--card-border--less:	.5px;
	--card-border--default:	1px;
	--card-border--more:	2px;
	--card-border--most:	.25rem;

	/*	A card casts none until a design layer gives it one, a grade: none at the first
		rung, then four that grow - a card that is lifted, one lifted high - the two the
		sets had before - and two higher still - in the colour of the tone	*/
	--card-shadow--default:	none;
	--card-shadow--light:	0 .125rem .75rem var(--card-tone);
	--card-shadow--medium:	0 .25rem 1.5rem var(--card-tone), 0 .0625rem .25rem var(--card-tone);
	--card-shadow--strong:	0 .375rem 2.25rem var(--card-tone), 0 .125rem .5rem var(--card-tone);
	--card-shadow--full:	0 .5rem 3rem var(--card-tone), 0 .1875rem .75rem var(--card-tone);

	/*	The colour a shadow is drawn in: the ink of the page, thinned to the strength
		the palette's shadow has, the palette's own shadow colour, and the brand colour
		as it was picked, thinned - a shadow that is a tone of the page, as it is, or a
		tone of the brand	*/
	--card-tone--less: 			color-mix( in srgb, var(--color-text) 12%, transparent );
	--card-tone--default: 	var(--nino-default-shadow);
	--card-tone--more: 			color-mix( in srgb, var(--color-secondary) 30%, transparent );

	/*	What a card does under the pointer: nothing, as the framework has it - and as
		this set has it, so the middle is the first position -, and lifted: a rise of a
		quarter of a rem (the translate, which lies beside the transform of an animation
		and not over it) and the strongest step of the shadow. The shadow of the first
		two positions is the card's own at rest, so that nothing changes under the pointer	*/
	--card-hover--less: 			none;
	--card-hover--default: 		none;
	--card-hover--more: 			0 -.25rem;

	--card-hover-shadow--less: 			var(--shadow-card);
	--card-hover-shadow--default: 	var(--shadow-card);
	--card-hover-shadow--more: 			0 .25rem 1.5rem var(--card-tone), 0 .0625rem .25rem var(--card-tone);

	/*	The letter-spacing of the title of a card, as a step from what the template gives it: nothing at the middle, so that the middle is
		the template, whichever it is. Tighter on the two steps below it, looser on the two above	*/
	--card-title-tracking--least:	-.04em;
	--card-title-tracking--less:	-.02em;
	--card-title-tracking--default:	0em;
	--card-title-tracking--more:	.06em;
	--card-title-tracking--most:	.15em;

	/*	The ground behind the words of the title of a card: none, as Nino.css has it, soft or full. The ladder is the share of the colour of the title
		in the ground, 12% and 100%, over what the title stands on; its aspects are the share of the ground in the words (the words of a
		full ground are the ground's own), the factor of the room round them and of the radius, and the width: a title with a ground is as wide
		as its words. The roles are read where the title stands, so that each ground is its own	*/
	--card-title-ground--less: 			12%;
	--card-title-ground--default: 	0%;
	--card-title-ground--more: 			100%;

	--card-title-ground-ink--less: 		0%;
	--card-title-ground-ink--default: 0%;
	--card-title-ground-ink--more: 		100%;

	--card-title-ground-fit--less: 		1;
	--card-title-ground-fit--default: 0;
	--card-title-ground-fit--more: 		1;

	--card-title-ground-width--less: 		fit-content;
	--card-title-ground-width--default: auto;
	--card-title-ground-width--more: 		fit-content;

	/*	Where the words and the button of a card stand: in the middle, as the card they stand in has them - which is the left, unless the page says
		otherwise - or right. The aspects say where a title as wide as its words stands and where a button stands in a card that lays itself out
		in a column	*/
	--card-align--less: 			center;
	--card-align--default: 	match-parent;
	--card-align--more: 			right;

	--card-align-margin--less: 			auto;
	--card-align-margin--default: 	0;
	--card-align-margin--more: 			auto 0;

	--card-align-button--less: 			center;
	--card-align-button--default: 	flex-start;
	--card-align-button--more: 			flex-end;

	/*	The case of the title and of the subtitle: as they are written, or in capitals	*/
	--card-title-case--default: 		none;
	--card-title-case--more: 			uppercase;

	--card-subtitle-case--default: 	none;
	--card-subtitle-case--more: 		uppercase;
}

@media (min-width: 768px) {
	:root {
		--card-title--least:	calc(.7 * 25 / 32);
		--card-title--less:	calc(.85 * 25 / 32);
		--card-title--default:	calc(25 / 32);
		--card-title--more:	calc(1.25 * 25 / 32);
		--card-title--most:	calc(1.5 * 25 / 32);
	}
}

/*	The two numbers and the shadow Nino.css reads by name	*/
:root {
	--card-title-scale: var(--card-title);
	--card-subtitle-scale: var(--card-subtitle);
	--shadow-card: var(--card-shadow);
}

.nino-card-title {
	text-transform: var(--card-title-case);
}
.nino-card-subtitle {
	text-transform: var(--card-subtitle-case);
}

.nino-card-content:where(:not([class*="nino-pt-"], [class*="nino-pb-"], [class*="nino-p-"])) {
	padding: calc( var(--card-space) / 2 * var(--whitespace-scale, 1) ) calc( var(--card-space) * var(--whitespace-scale, 1) );
}
.nino-card-title:where(:not([class*="nino-mb-"], [class*="nino-m-"])),
.nino-card-subtitle:where(:not([class*="nino-mb-"], [class*="nino-m-"])),
.nino-card-descr:where(:not([class*="nino-mb-"], [class*="nino-m-"])) {
	margin-bottom: calc( var(--card-space) * var(--whitespace-text, 1) );
}
.nino-card-img:where(:not([class*="nino-mb-"], [class*="nino-m-"])) {
	margin-bottom: calc( var(--card-space) / 2 * var(--whitespace-text, 1) );
}

.nino-card--alt, .nino-card--tint, .nino-card--dark, .nino-card--black, .nino-card--primary, .nino-card--brand-alt, .nino-card--counter, .nino-card--dim {
	border-width: var(--card-border);
}

/*	The hover, as the ladder says it: the card rises and takes the shadow. Only for the card the pointer
	can mean as a whole (.nino-card--linked), and only where the visitor has not asked for less motion.
	The transition is the hover's own, so that the one a viewport animation has on the card is not
	taken from it while it is at rest - and it carries the animation's: its three properties with the
	time and the easing Nino.css gives them (the easing is written out, Nino.css names no custom
	property for it), so that a card hovered while it arrives goes on arriving. A borderless card has
	no shadow to lift	*/
@media (prefers-reduced-motion: no-preference) {
	.nino-card--linked:hover {
		translate: var(--card-hover);
		transition: translate .2s ease, box-shadow .2s ease,
			opacity var(--vpa-duration) cubic-bezier(0.5, 0, 0.7, 1),
			transform var(--vpa-duration) cubic-bezier(0.5, 0, 0.7, 1),
			filter var(--vpa-duration) cubic-bezier(0.5, 0, 0.7, 1);
	}
	.nino-card--linked:where(:not(.nino-card--borderless)):hover {
		box-shadow: var(--card-hover-shadow);
	}
}

/* ---- the title and the words ---- */

/*	The alignment of what is in the card, only where the page says nothing of its own; the button of a card that is a column; the place of a title
	that is as wide as its words; and where the page aligns by a class, the place that class gives it	*/
.nino-card:where(:not([class*="nino-text-"], [class*="nino-text-"] *)) {
	text-align: var(--card-align);
}
:is(.nino-card--middle, .nino-card--bottom, .nino-card--last-bottom):where(:not([class*="nino-text-"], [class*="nino-text-"] *)) > .nino-btn,
.nino-card--last-bottom:where(:not([class*="nino-text-"], [class*="nino-text-"] *)) > .nino-card-content > .nino-btn {
	align-self: var(--card-align-button);
}
/*	The margins of the title stand down for the classes that align it at every width - left, centre and right - and for any class on what it stands in, since
	the words of a card are inherited from the card. A class that aligns the title itself from a breakpoint leaves it where the alignment says below it, and the
	mirrors after this rule take it from the breakpoint on	*/
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not(.nino-text-left, .nino-text-center, .nino-text-right, [class*="nino-text-"] *, [class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
	margin-inline: var(--card-align-margin);
}
.nino-text-center :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
	margin-inline: auto;
}
.nino-text-right :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
	margin-inline: auto 0;
}
@media (min-width: 640px) {
	.nino-text-s-left :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-s-left:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: 0;
	}
	.nino-text-s-center :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-s-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto;
	}
	.nino-text-s-right :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-s-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto 0;
	}
}
@media (min-width: 768px) {
	.nino-text-m-left :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-m-left:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: 0;
	}
	.nino-text-m-center :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-m-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto;
	}
	.nino-text-m-right :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-m-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto 0;
	}
}
@media (min-width: 1024px) {
	.nino-text-l-left :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-l-left:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: 0;
	}
	.nino-text-l-center :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-l-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto;
	}
	.nino-text-l-right :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-l-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto 0;
	}
}
@media (min-width: 1280px) {
	.nino-text-xl-left :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-xl-left:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: 0;
	}
	.nino-text-xl-center :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-xl-center:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto;
	}
	.nino-text-xl-right :is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])),
	:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-text-xl-right:where(:not([class*="nino-m-"], [class*="nino-mx-"], [class*="nino-ml-"], [class*="nino-mr-"])) {
		margin-inline: auto 0;
	}
}
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud) {
	letter-spacing: var(--card-title-tracking);
}
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud) {
	background-color: color-mix( in srgb, var(--color-title) var(--card-title-ground), transparent );
	border-radius: calc( var(--radius) * var(--card-title-ground-fit) );
	width: var(--card-title-ground-width);
}
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-ink--"])) {
	color: color-mix( in srgb, var(--color-ground) var(--card-title-ground-ink), var(--color-title) );
}

/*	The ink of the title and of the subtitle of a card is the tone the knob selects, read where the words stand: the colour of the words of the title (and the
	colour the ground behind it is a share of), the colour of the subtitle. At the middle it is the one Nino.css gives the ground the card stands on, so that
	nothing changes where no tone is chosen. A title or a subtitle that says an ink of its own (nino-ink--accent, nino-ink--muted) keeps it	*/
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-ink--"])) {
	background-color: color-mix( in srgb, var(--card-title-ink) var(--card-title-ground), transparent );
	color: color-mix( in srgb, var(--color-ground) var(--card-title-ground-ink), var(--card-title-ink) );
}
:is(.nino-card-subtitle, .nino-card-subtitle--quiet, .nino-card-subtitle--loud):where(:not([class*="nino-ink--"])) {
	color: var(--card-subtitle-ink);
}
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-ink--accent {
	color: color-mix( in srgb, var(--color-ground) var(--card-title-ground-ink), var(--color-accent) );
}
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud).nino-ink--muted {
	color: color-mix( in srgb, var(--color-ground) var(--card-title-ground-ink), color-mix(in srgb, currentColor 80%, transparent) );
}
:is(.nino-card-title, .nino-card-title--quiet, .nino-card-title--loud):where(:not([class*="nino-p-"], [class*="nino-pt-"], [class*="nino-pb-"], [class*="nino-pl-"], [class*="nino-pr-"])) {
	padding: calc( .15em * var(--card-title-ground-fit) ) calc( .5em * var(--card-title-ground-fit) );
}

/*	The colour of the title and of the subtitle of a card is the tone of the page on the ground the card stands on, so the rung of an ink is declared on every
	element (see Nino.css): a card on a dark section, a card of the colour of the brand and a counter card re-point the roles on their own, and the rung is read
	where the words stand. The rung is the tone this set gives: the colour of a title is the role the framework gives it, and a subtitle takes the ink of the card as the framework has it (currentColor), which a knob replaces with a tone of its own	*/
:root, :root * {
	--card-title-ink--default:		var(--color-title);
	--card-subtitle-ink--default:	currentColor;
}


/* ==== 12. buttons: regular (size less, spread default, tracking default, space default, corners least, outline default, hover default, case more) ==== */
/*	@name			Regular
 *	@description	The framework as it is: the middle of every ladder. Every .nino-btn variant and the link that looks like one.
 *	@description-de	Das Framework, wie es ist: die Mitte jeder Leiter. Jede .nino-btn-Variante und der Link, der wie eine aussieht.
 *
 *	@knob	size		Size of a button
 *	@knob	spread		How far a small and a big button stand from it
 *	@knob	tracking	Letter-spacing of the label
 *	@knob	space		Space around the label
 *	@knob	corners		Corner radius
 *	@knob	outline		Weight of the line of the outline button
 *	@knob	hover		What a button does under the pointer
 *	@knob	case		Capitals in the label of a button
 *
 *	Regular is the starting point, not a design. Every value it declares is the
 *	framework's own, so a button under it looks as it does under Nino.css
 *	alone, and every one of them is a ladder, so each knob has something to
 *	reach: the five values of a scale, the middle of them Nino.css and the
 *	others two steps to each side, or the three of a choice.
 *
 *	Two rules for a set:
 *
 *	  - Only the classes of this template: the button and its variants. A
 *	    button set does not touch a section title, however tempting.
 *	  - Colours through the roles, never as literals. Nor the font: the face
 *	    and the weight of a button are the button role of the type tab
 *	    (--font-button-*), and a set that wrote its own would contradict the
 *	    panel. The case is the knob's: a toggle of two rungs, none and
 *	    uppercase, which the set reads.
 *
 *	The size is what the padding, the type and the radius of a button are
 *	multiplied by. The variants are that size times a number, in Nino.css as
 *	here: a small button is the size times 1 less the spread - its type never under
 *	.75rem - a big one the size times 1 plus it.
 *
 *	The tracking is the letter-spacing of the label, in em, so that a small and a
 *	big button space their letters in proportion; none at the middle, as Nino.css
 *	has it. The outline is the weight of the line of the outline button, times the
 *	size: 1px at the middle, which is Nino.css's, none at the least, a hairline
 *	below the middle and two and three pixels above it. Corners, tracking and
 *	outline at the most are a pill; corners at the least, the tracking at the most
 *	and the outline above the middle are a square, wide-set button.
 *
 *	The hover is a choice of three: nothing, which is the button as Nino.css
 *	has it and also what this set does by itself, so the middle is the first
 *	position; and lifted, a rise of one pixel with a shadow under it, for the
 *	button a pointer rests on - and only where the visitor has not asked for
 *	less motion. Nino.css answers the pointer itself, with the ground of the
 *	outline and of the dark button and the dimming of the two brand buttons,
 *	and that stays at every position, as does the focus: a button the keyboard
 *	has does not rise and keeps its ring. A button that is off does not rise,
 *	and the outline, which has no ground to cast a shadow from, rises without
 *	one.
 *
 *	Copy this file under a name of your own and start there.
 */

:root {
	/*	What a button is multiplied by: 1 is Nino.css as it is	*/
	--buttons-size--least:	.75;
	--buttons-size--less:	.875;
	--buttons-size--default:	1;
	--buttons-size--more:	1.2;
	--buttons-size--most:	1.4;

	/*	How far the variants stand from the size, as a part of it: .3 is the
		.7 of a small button and the 1.3 of a big one	*/
	--buttons-spread--least: 		.1;
	--buttons-spread--less: 		.2;
	--buttons-spread--default: 	.3;
	--buttons-spread--more: 		.4;
	--buttons-spread--most: 		.5;

	/*	Twice the padding above and below the label, and the padding beside it.
		The scale ends below --space-1, so the least is half of that	*/
	--buttons-space--least: 		calc( var(--space-1) * .5 );
	--buttons-space--less: 			var(--space-1);
	--buttons-space--default: var(--space-2);
	--buttons-space--more: 			var(--space-3);
	--buttons-space--most: 			var(--space-4);

	/*	The letter-spacing of the label: tighter below the middle, wider above it	*/
	--buttons-tracking--least:	-.03em;
	--buttons-tracking--less:	-.015em;
	--buttons-tracking--default:	0em;
	--buttons-tracking--more:	.08em;
	--buttons-tracking--most:	.15em;

	/*	A pill is no large number but a radius past half the height, where it stops growing	*/
	--buttons-corners--least: 		0rem;
	--buttons-corners--less: 		var(--radius-small);
	--buttons-corners--default: var(--radius);
	--buttons-corners--more: 		var(--radius-large);
	--buttons-corners--most: 		999rem;

	/*	The weight of the line of the outline button: the framework's 1px at the middle, none
		at the least, half a pixel below the middle where the screen can draw one, and 2px
		and 3px above	*/
	--buttons-outline--least: 		0px;
	--buttons-outline--less: 			.5px;
	--buttons-outline--default: 	1px;
	--buttons-outline--more: 			2px;
	--buttons-outline--most: 			3px;

	/*	What a button does under the pointer: nothing, as Nino.css has it - and as this
		set has it, so the middle is the first position -, or lifted: a rise of one pixel
		(the translate, which lies beside the transform of an animation and does not
		replace it) with the shadow of a button that stands over the page. The shadow is
		a second ladder of the knob, as long as its own; the first two positions name the
		shadow the button has at rest, so that nothing changes under the pointer	*/
	--buttons-hover--less: 		none;
	--buttons-hover--default: 	none;
	--buttons-hover--more: 		0 -1px;

	--buttons-hover-shadow--less: 		none;
	--buttons-hover-shadow--default: 	none;
	--buttons-hover-shadow--more: 		0 .25rem .5rem var(--nino-default-shadow);

	/*	The case of the label: as it is written, or in capitals	*/
	--buttons-case--default: 	none;
	--buttons-case--more: 		uppercase;
}

/*	Not where the button names a padding of its own: the spacing classes of
	Nino.css come last in its stylesheet so that they win	*/
.nino-btn:where(:not([class*="nino-pt-"], [class*="nino-pb-"], [class*="nino-p-"])) {
	padding: calc( var(--buttons-space) / 2 * var(--buttons-size) ) calc( var(--buttons-space) * var(--buttons-size) );
}
.nino-btn {
	font-size: calc( var(--font-button-size) * var(--buttons-size) );
	border-radius: calc( var(--buttons-corners) * var(--buttons-size) );
	letter-spacing: var(--buttons-tracking);
	text-transform: var(--buttons-case);
}
.nino-btn--small:where(:not([class*="nino-pt-"], [class*="nino-pb-"], [class*="nino-p-"])) {
	padding: calc( var(--buttons-space) / 2 * var(--buttons-size) * ( 1 - var(--buttons-spread) ) ) calc( var(--buttons-space) * var(--buttons-size) * ( 1 - var(--buttons-spread) ) );
}
.nino-btn--small {
	font-size: max( calc( var(--font-button-size) * var(--buttons-size) * ( 1 - var(--buttons-spread) ) ), .75rem );
	border-radius: calc( var(--buttons-corners) * var(--buttons-size) * ( 1 - var(--buttons-spread) ) );
}
.nino-btn--big:where(:not([class*="nino-pt-"], [class*="nino-pb-"], [class*="nino-p-"])) {
	padding: calc( var(--buttons-space) / 2 * var(--buttons-size) * ( 1 + var(--buttons-spread) ) ) calc( var(--buttons-space) * var(--buttons-size) * ( 1 + var(--buttons-spread) ) );
}
.nino-btn--big {
	font-size: calc( var(--font-button-size) * var(--buttons-size) * ( 1 + var(--buttons-spread) ) );
	border-radius: calc( var(--buttons-corners) * var(--buttons-size) * ( 1 + var(--buttons-spread) ) );
}

/*	The line of the outline button, times the size	*/
.nino-btn--outline {
	border-width: calc( var(--buttons-outline) * var(--buttons-size) );
}

/*	The hover, as the ladder says it. Only where the visitor has not asked for less
	motion, and not for a button that is off or that the keyboard has: the ring of the
	focus is the framework's and is never covered. The transition is the hover's own -
	the framework's, which it replaces while the pointer is on the button, with the
	rise and the shadow added - and the transform and the filter of the viewport
	animation, with the time and the easing Nino.css gives them (the easing is written
	out, Nino.css names no custom property for it): the opacity keeps the .3s of the
	framework, the brand buttons dim under the pointer, and a button hovered while it
	arrives goes on arriving. The outline casts no shadow	*/
@media (prefers-reduced-motion: no-preference) {
	.nino-btn:where(:not(:focus-visible, :disabled, [aria-disabled="true"])):hover {
		translate: var(--buttons-hover);
		transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .3s, translate .2s ease, box-shadow .2s ease,
			transform var(--vpa-duration) cubic-bezier(0.5, 0, 0.7, 1),
			filter var(--vpa-duration) cubic-bezier(0.5, 0, 0.7, 1);
	}
	.nino-btn:where(:not(.nino-btn--outline, :focus-visible, :disabled, [aria-disabled="true"])):hover {
		box-shadow: var(--buttons-hover-shadow);
	}
}


/* ==== 13. lists: regular (scale default, space default, marker default) ==== */
/*	@name			Regular
 *	@description	The framework as it is: the middle of every ladder. Plain lists, lists with a check and numbered lists.
 *	@description-de	Das Framework, wie es ist: die Mitte jeder Leiter. Einfache Listen, Listen mit Haken und nummerierte Listen.
 *
 *	@knob	scale		Type size of a list
 *	@knob	space		Space between the items
 *	@knob	marker		The mark before an item of a check list and of a numbered list
 *
 *	Regular is the starting point, not a design. Every value it declares is the
 *	framework's own, so a list under it looks as it does under Nino.css alone -
 *	and every one of them is a ladder, so each knob has something to reach: the
 *	five values of a scale, the middle of them Nino.css and the others two steps
 *	to each side, or the three of a choice.
 *
 *	Two rules for a set:
 *
 *	  - Only the classes of this template: the list, its items and the marks
 *	    before them. A set of tables does not touch a list, however tempting.
 *	  - Colours through the roles, never as literals. Nor the font: the face
 *	    and the case of the text are the roles of the type tab.
 *
 *	The size of a list is the size of the text round it, times the scale; the
 *	marks and the room they stand in follow it. The space is the gap between
 *	two items. A list in columns keeps the gaps Nino.css gives it.
 *
 *	The marker is a choice of three: plain - the glyph and the number in the
 *	colour and the weight of the text, with nothing under them -, the middle,
 *	which is Nino.css (the glyph bold in the success colour, the number bold
 *	on a disc of the primary colour), and emphasised, with the disc under both,
 *	in the primary colour and the text solved for it. A mark is more than one
 *	value - its weight, and for each kind of list the ink and the ground, and
 *	the size of the disc where the glyph has one -, so the knob declares one
 *	more ladder for each, named after the knob, the kind and the aspect
 *	(--lists-marker-check-ink--less ...), as long as the knob's own, which is
 *	the weight. They move together: the compiler selects every ladder of a
 *	knob where it stands. A choice is declared under less, default and more.
 *	Copy this file under a name of your own and start there.
 */

:root {
	/*	The type size of a list is the size of the text round it, times this	*/
	--lists-scale--least: 		.8;
	--lists-scale--less: 		.9;
	--lists-scale--default: 	1;
	--lists-scale--more: 		1.15;
	--lists-scale--most: 		1.3;

	/*	The gap between two items: --space-1, two steps to each side in fractions of it,
		since the room between two lines of text is finer than a step of the scale	*/
	--lists-space--least: 		calc( var(--space-1) * .4 );
	--lists-space--less: 		calc( var(--space-1) * .7 );
	--lists-space--default: 	var(--space-1);
	--lists-space--more: 		calc( var(--space-1) * 1.5 );
	--lists-space--most: 		calc( var(--space-1) * 2.2 );

	/*	The weight of the mark. Plain is the weight of the text, Nino.css has it bold	*/
	--lists-marker--less: 		normal;
	--lists-marker--default: 	bold;
	--lists-marker--more: 		bold;

	/*	The glyph of a check list: its ink, the disc under it and the size of that disc.
		Nino.css draws the glyph in the success colour with no disc, and a glyph with none
		is as big as itself, which is what auto says. The emphasised mark is on a disc of
		the primary colour, in the ink solved for it	*/
	--lists-marker-check-ink--less: 		currentcolor;
	--lists-marker-check-ink--default: 		var(--color-success);
	--lists-marker-check-ink--more: 		var(--color-primary-text);

	--lists-marker-check-ground--less: 		transparent;
	--lists-marker-check-ground--default: 	transparent;
	--lists-marker-check-ground--more: 		var(--color-primary);

	--lists-marker-check-box--less: 		auto;
	--lists-marker-check-box--default: 		auto;
	--lists-marker-check-box--more: 		1.5em;

	/*	The number of a numbered list: its ink and the disc under it. Nino.css draws it
		in the ink solved for the primary colour, on a disc of it; plain takes the disc away	*/
	--lists-marker-number-ink--less: 		currentcolor;
	--lists-marker-number-ink--default: 	var(--color-primary-text);
	--lists-marker-number-ink--more: 		var(--color-primary-text);

	--lists-marker-number-ground--less: 	transparent;
	--lists-marker-number-ground--default: 	var(--color-primary);
	--lists-marker-number-ground--more: 	var(--color-primary);
}

/*	The size and the gap. A list in columns keeps its own gaps	*/
.nino-list {
	font-size: calc( 1em * var(--lists-scale) );
}
.nino-list:not(.nino-list--columns) {
	gap: var(--lists-space);
}

/*	The room the marks stand in grows with the type, so that the middle is Nino.css and
	a list at +2 has marks that are not lost in it	*/
.nino-list--check li {
	padding-left: calc( var(--space-3) * var(--lists-scale) );
}
.nino-list--check li::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lists-marker-check-box);
	height: var(--lists-marker-check-box);
	border-radius: 50%;
	background-color: var(--lists-marker-check-ground);
	color: var(--lists-marker-check-ink);
	font-weight: var(--lists-marker);
}
.nino-list--numbered li {
	min-height: calc( var(--space-3) * var(--lists-scale) );
	padding-left: calc( var(--space-4) * var(--lists-scale) );
}
.nino-list--numbered li::before {
	width: calc( var(--space-3) * var(--lists-scale) );
	height: calc( var(--space-3) * var(--lists-scale) );
	background-color: var(--lists-marker-number-ground);
	color: var(--lists-marker-number-ink);
	font-weight: var(--lists-marker);
}


/* ==== 14. tables: regular (scale default, space default, border default, zebra default, stripes default) ==== */
/*	@name			Regular
 *	@description	The framework as it is: the middle of every ladder. Tables, their cells, their lines and the stripes of one that asks for them.
 *	@description-de	Das Framework, wie es ist: die Mitte jeder Leiter. Tabellen, ihre Zellen, ihre Linien und die Streifen einer, die danach fragt.
 *
 *	@knob	scale		Type size of a table
 *	@knob	space		Space inside a cell
 *	@knob	border		Weight of the lines of a table
 *	@knob	zebra		Stripes of a table that asks for them
 *	@knob	stripes		How strong the stripes are
 *
 *	Regular is the starting point, not a design. Every value it declares is the
 *	framework's own, so a table under it looks as it does under Nino.css alone -
 *	and every one of them is a ladder, so each knob has something to reach: the
 *	five values of a scale, the middle of them Nino.css and the others two steps
 *	to each side, or the three of a choice.
 *
 *	Two rules for a set:
 *
 *	  - Only the classes of this template: the table, its cells, its head, the
 *	    one that is bordered and the one that is striped. A set of buttons does
 *	    not touch a table, however tempting.
 *	  - Colours through the roles, never as literals. Nor the font: the face,
 *	    the weight and the case of the text are the roles of the type tab.
 *
 *	A knob that is more than one value - the stripes of a table are a
 *	background and a colour of text - declares one more ladder for each, named
 *	after the knob and an aspect of it (--tables-zebra-ink--less ...), as long as
 *	the knob's own. They move together: the compiler selects every ladder of a
 *	knob where it stands. An aspect at its middle step names the value the
 *	property has anyway, so a rule that reads it changes nothing there. The
 *	zebra is a choice of three, declared under less, default and more: no
 *	stripes, the stripes, and the stripes with a line over them.
 *
 *	How strong the stripes are is a scale of its own, and the zebra reads it
 *	where it names the second ground of the page: the middle is the kernel's
 *	--color-section-alt-bg, the two steps under it are that ground mixed toward
 *	the ground of the page, the two over it mixed toward its ink.
 *
 *	The spacing classes of Nino.css (nino-p-2, nino-mb-3 ...) come last in its
 *	stylesheet so that they win. Copy this file under a name of your own and
 *	start there.
 */

:root {
	/*	The type size of a table is the size of the text around it, times this	*/
	--tables-scale--least: 		.75;
	--tables-scale--less: 		.87;
	--tables-scale--default: 	1;
	--tables-scale--more: 		1.15;
	--tables-scale--most: 		1.32;

	/*	Half the padding of a cell. A cell's space is finer than a card's, so the
		steps are fractions of the middle and not steps of the scale	*/
	--tables-space--least: 		calc( var(--space-1) * .4 );
	--tables-space--less: 		calc( var(--space-1) * .7 );
	--tables-space--default: 	var(--space-1);
	--tables-space--more: 		calc( var(--space-1) * 1.5 );
	--tables-space--most: 		calc( var(--space-1) * 2.2 );

	/*	The half pixel is a hairline where the screen can draw one, and 1px where it cannot	*/
	--tables-border--least: 	0px;
	--tables-border--less: 		.5px;
	--tables-border--default: 	1px;
	--tables-border--more: 		2px;
	--tables-border--most: 		3px;

	/*	The even rows of a table that has the class: none, the stripes, or the stripes
		with a line over them. The text on them is the ink of the second ground - or,
		with no stripe, the text round the table	*/
	--tables-zebra--less: 		transparent;
	--tables-zebra--default: 	var(--tables-stripes);
	--tables-zebra--more: 		linear-gradient( var(--color-border), var(--color-border) ) top / 100% 1px no-repeat var(--tables-stripes);

	--tables-zebra-ink--less: 		initial;
	--tables-zebra-ink--default: 	var(--color-section-alt-text);
	--tables-zebra-ink--more: 		var(--color-section-alt-text);

	/*	How far the even rows depart from the ground. The middle is the second ground of
		the page, which is what Nino.css paints them with; under it that ground mixed
		toward the ground of the page, over it mixed toward the ink it carries - the stripe
		stays a tint of the pair the palette solved, and the ink on it stays legible	*/
	--tables-stripes--least: 		color-mix( in srgb, var(--color-section-alt-bg) 35%, var(--color-background) );
	--tables-stripes--less: 		color-mix( in srgb, var(--color-section-alt-bg) 70%, var(--color-background) );
	--tables-stripes--default: 		var(--color-section-alt-bg);
	--tables-stripes--more: 		color-mix( in srgb, var(--color-section-alt-text) 8%, var(--color-section-alt-bg) );
	--tables-stripes--most: 		color-mix( in srgb, var(--color-section-alt-text) 16%, var(--color-section-alt-bg) );
}

.nino-table {
	font-size: calc( 1em * var(--tables-scale) );
}
.nino-table th,
.nino-table td {
	padding: var(--tables-space) calc( var(--tables-space) * 2 );
	border-bottom-width: var(--tables-border);
}
.nino-table--bordered th,
.nino-table--bordered td {
	border-width: var(--tables-border);
}
.nino-table--striped tbody tr:nth-child(even) {
	background: var(--tables-zebra);
	color: var(--tables-zebra-ink, currentcolor);
}


/* ==== 15. forms: filled (scale default, space default, corners default, line default, labels default, edge default, label subtitle) ==== */
/*	@name			Filled
 *	@description	Tinted fields without a line; the line under a field comes from the position above the middle, and the tint drops to the ground when the field is typed in.
 *	@description-de	Getönte Felder ohne Linie; die Linie unter einem Feld kommt von der Stellung über der Mitte, und die Tönung fällt auf den Grund zurück, wenn im Feld getippt wird.
 *
 *	@knob	scale		Size of the fields' text
 *	@knob	space		Space inside a field and under it
 *	@knob	corners		Corners of a field
 *	@knob	line		Weight of the line under a field
 *	@knob	labels		Where the label of a field stands
 *	@knob	edge		Colour of the lines
 *	@knob	label		Colour of the labels
 *
 *	The fill is the field, which is why it is the ink of the ground the field stands on, thinned out, rather than a colour of
 *	its own: a form is not a place for a second palette. On focus the fill drops back to the ground and the ring takes over,
 *	so the field being typed in is the one that looks emptiest. Colour instead of edges: the one line there is is the one
 *	under a field, which the line knob draws one pixel lighter than the other sets do - so it shows from the position above
 *	the middle. A label that floats lies on the tint of its field and is cut on it.
 */

:root {
	--forms-scale--least:	.87;
	--forms-scale--less:	.94;
	--forms-scale--default:	1;
	--forms-scale--more:	1.15;
	--forms-scale--most:	1.32;

	--forms-space--least:	calc( var(--space-1) * .4 );
	--forms-space--less:	calc( var(--space-1) * .7 );
	--forms-space--default:	var(--space-1);
	--forms-space--more:	calc( var(--space-1) * 1.5 );
	--forms-space--most:	calc( var(--space-1) * 2.2 );

	--forms-corners--least:		0rem;
	--forms-corners--less:		0rem;
	--forms-corners--default:	var(--radius-small);
	--forms-corners--more:		var(--radius-large);
	--forms-corners--most:		1rem;

	/*	The weight of a line is the kernel's, as in every set; what this set draws of it is read below	*/
	--forms-line--least:	0px;
	--forms-line--less:		.5px;
	--forms-line--default:	1px;
	--forms-line--more:		2px;
	--forms-line--most:		3px;

	/*	Where a label stands. Above the field is Nino.css: the form is a block and the label a line of text. Beside, the
		form is a grid of a column for the labels and a column for the fields, this far apart. Floating, the label is
		lifted onto the top edge of its field, a little smaller, and cut out of the tint of the field: the cut is left
		initial there, so that the label reads the tint where it stands - the fill written here would be read on :root,
		the page's tint on a dark section too	*/
	--forms-labels--less:		var(--space-2);
	--forms-labels--default:	normal;
	--forms-labels--more:		normal;

	--forms-labels-form--less:		grid;
	--forms-labels-form--default:	block;
	--forms-labels-form--more:		block;

	--forms-labels-cols--less:		max-content minmax(0, 1fr);
	--forms-labels-cols--default:	none;
	--forms-labels-cols--more:		none;

	--forms-labels-align--less:		baseline;
	--forms-labels-align--default:	normal;
	--forms-labels-align--more:		normal;

	--forms-labels-wide--less:		1 / -1;
	--forms-labels-wide--default:	auto;
	--forms-labels-wide--more:		auto;

	--forms-labels-start--less:		start;
	--forms-labels-start--default:	auto;
	--forms-labels-start--more:		auto;

	--forms-labels-block--less:		inline;
	--forms-labels-block--default:	inline;
	--forms-labels-block--more:		table;

	--forms-labels-pos--less:		static;
	--forms-labels-pos--default:	static;
	--forms-labels-pos--more:		relative;

	--forms-labels-lift--less:		0em;
	--forms-labels-lift--default:	0em;
	--forms-labels-lift--more:		.8em;

	--forms-labels-cut--less:		transparent;
	--forms-labels-cut--default:	transparent;
	--forms-labels-cut--more:		initial;

	/*	What makes it filled: the line under the field alone, one pixel less than the knob says - a tinted field has none at the
		middle, where the kernel has a hairline, and never less than none -, the room round the words and under the field, the
		status line in the same proportions, and the ring flush with the field	*/
	--forms-width:		0 0 max( 0px, calc( var(--forms-line) - 1px ) );
	--forms-ring-offset:	0px;
	--forms-pad:		calc( var(--forms-space) * 2 / 1.5 ) calc( var(--forms-space) * 2 );
	--forms-gap:		calc( var(--forms-space) * 2 );
	--forms-message-pad:	calc( var(--forms-space) * 2 / 1.4 );
}

/*	The colours are declared where they are used, on every element (see Nino.css): the tones of the two inks, the tint at
	rest, the ground in focus, and the colour of the line kept	*/
:root, :root * {
	--forms-edge--default:	var(--color-border);
	--forms-label--default:	var(--color-ink);
	--forms-fill:		color-mix( in srgb, var(--color-ink) 7%, var(--color-ground) );
	--forms-fill-focus:	var(--color-ground);
	--forms-edge-focus:	var(--forms-edge);
}


/* ==== 16. tabs: regular (scale default, space default, line default, active default) ==== */
/*	@name			Regular
 *	@description	The framework as it is: the middle of every ladder. A line under the bar, and a line under the tab that is open.
 *	@description-de	Das Framework, wie es ist: die Mitte jeder Leiter. Eine Linie unter der Leiste und eine unter dem offenen Tab.
 *
 *	@knob	scale		Type size of the tabs
 *	@knob	space		Space inside a tab
 *	@knob	line		Weight of the line under the bar and under the open tab
 *	@knob	active		Colour of the open tab
 *
 *	Regular is the starting point, not a design. Every value it declares is the
 *	framework's own, so a group of tabs under it looks as it does under Nino.css
 *	alone - and every one of them is a ladder, so each knob has something to
 *	reach: the five values of a scale, the middle of them Nino.css and the others
 *	two steps to each side, and for an ink the tone Nino.css gives it.
 *
 *	Two rules for a set:
 *
 *	  - Only the classes of this template: the bar, its tabs, the tab that is
 *	    open and the panels. A set of buttons does not touch a tab, however
 *	    tempting.
 *	  - Colours through the roles, never as literals. Nor the font: the face
 *	    and the weight of the text are the roles of the type tab.
 *
 *	The size of the tabs is the size of the text round them, times the scale.
 *	The space is half the padding of a tab across, and all of it above and
 *	below - the proportion Nino.css has, which is one step and two. The line is
 *	the weight of the rule under the bar; the rule under the open tab is a
 *	ladder beside it, named after the knob and an aspect of it
 *	(--tabs-line-open--less ...), as long as the knob's own: they move together,
 *	the compiler selects every ladder of a knob where it stands. The colour of
 *	the open tab is the text and the rule under it: an ink, written on every
 *	element, so that on a dark section it is the accent of that section.
 *
 *	Nino.css has the classes the script and the markup use; a set changes how
 *	they look and nothing of what they do. Copy this file under a name of your
 *	own and start there.
 */

:root {
	/*	The type size of the tabs is the size of the text around them, times this	*/
	--tabs-scale--least: 		.8;
	--tabs-scale--less: 		.9;
	--tabs-scale--default: 		1;
	--tabs-scale--more: 		1.15;
	--tabs-scale--most: 		1.3;

	/*	Half the padding of a tab across. A tab's space is finer than a card's, so the
		steps are fractions of the middle and not steps of the scale	*/
	--tabs-space--least: 		calc( var(--space-1) * .4 );
	--tabs-space--less: 		calc( var(--space-1) * .7 );
	--tabs-space--default: 		var(--space-1);
	--tabs-space--more: 		calc( var(--space-1) * 1.5 );
	--tabs-space--most: 		calc( var(--space-1) * 2.2 );

	/*	The rule under the bar. The half pixel is a hairline where the screen can draw one, and 1px where it cannot	*/
	--tabs-line--least: 		0px;
	--tabs-line--less: 			.5px;
	--tabs-line--default: 		1px;
	--tabs-line--more: 			2px;
	--tabs-line--most: 			3px;

	/*	The rule under the open tab: twice the rule under the bar at the middle, as Nino.css has it	*/
	--tabs-line-open--least: 	0px;
	--tabs-line-open--less: 	1px;
	--tabs-line-open--default: 	2px;
	--tabs-line-open--more: 	3px;
	--tabs-line-open--most: 	4px;
}

/*	The colour of the open tab is the accent of the ground it stands on, so the rung of the ink is declared on every element
	(see Nino.css): the accent of the roles is the page's on :root, and on a dark section the tab would keep the one of a light
	one. The rung is the tone this set gives; the knob selects it, or a tone of its own	*/
:root, :root * {
	--tabs-active--default: 	var(--color-accent);
}

.nino-tabs-nav {
	font-size: calc( 1em * var(--tabs-scale) );
	border-bottom-width: var(--tabs-line);
}
.nino-tabs-tab {
	padding: var(--tabs-space) calc( var(--tabs-space) * 2 );
	border-bottom-width: var(--tabs-line-open);
}
.nino-tabs-tab.nino-is-active {
	color: var(--tabs-active);
	border-bottom-color: var(--tabs-active);
}


/* ==== 17. accordion: regular (scale default, space default, line default, marker default, marker-ink default, weight default) ==== */
/*	@name			Regular
 *	@description	The framework as it is: the middle of every ladder. A line under each entry, a plus that turns into a minus.
 *	@description-de	Das Framework, wie es ist: die Mitte jeder Leiter. Eine Linie unter jedem Eintrag, ein Plus, das zum Minus wird.
 *
 *	@knob	scale		Type size of the entries
 *	@knob	space		Space above and below the title and under the open entry
 *	@knob	line		Weight of the line under an entry
 *	@knob	marker		The sign in front of the title
 *	@knob	marker-ink	Colour of the sign
 *	@knob	weight		The titles in the weight of the text instead of bold
 *
 *	Regular is the starting point, not a design. Every value it declares is the
 *	framework's own, so an accordion under it looks as it does under Nino.css
 *	alone - and every one of them is a ladder, so each knob has something to
 *	reach: the five values of a scale, the middle of them Nino.css and the others
 *	two steps to each side, the three of a choice, the two of a toggle, and for an
 *	ink the tone Nino.css gives it.
 *
 *	Two rules for a set:
 *
 *	  - Only the classes of this template: the group, an entry, its title and its
 *	    panel. A set of lists does not touch an entry, however tempting.
 *	  - Colours through the roles, never as literals. Nor the font: the face of
 *	    the text is a role of the type tab, and the weight of the title the
 *	    toggle of this knob.
 *
 *	The size of the entries is the size of the text round them, times the scale.
 *	The space is the padding of the title above and below and the room under the
 *	words of an open entry; the line is the rule under an entry.
 *
 *	The marker is a choice of three: none, the middle, which is Nino.css (a plus
 *	that turns into a minus when the entry is open), and an arrow that is turned
 *	down when it is open. The knob's own ladder is the glyph of a closed entry. A
 *	sign is more than that - the glyph when the entry is open, the turn of the
 *	open one, where the glyph stands in its room (the arrow in the middle, so
 *	that it turns about its own centre) and the room it stands in, which the
 *	words of the panel are indented by -, so the knob declares one more ladder
 *	for each, named after the knob and the aspect (--accordion-marker-open--less ...), as long as the knob's own.
 *	They move together: the compiler selects every ladder of a knob where it
 *	stands. The colour of the sign is an ink of its own, marker-ink, written on
 *	every element, so that on a dark section it is the accent of that section. A
 *	choice is declared under less, default and more; a toggle under default and
 *	more.
 *
 *	The weight is a toggle whose first rung is bold, which is what Nino.css
 *	draws, and whose second is the weight of the text.
 *
 *	Copy this file under a name of your own and start there.
 */

:root {
	/*	The type size of the entries is the size of the text around them, times this	*/
	--accordion-scale--least: 		.8;
	--accordion-scale--less: 		.9;
	--accordion-scale--default: 	1;
	--accordion-scale--more: 		1.15;
	--accordion-scale--most: 		1.3;

	/*	The padding of the title above and below, and the room under the panel: --space-2, with steps in fractions of it
		since the room round a line of text is finer than a step of the scale	*/
	--accordion-space--least: 		calc( var(--space-2) * .4 );
	--accordion-space--less: 		calc( var(--space-2) * .7 );
	--accordion-space--default: 	var(--space-2);
	--accordion-space--more: 		calc( var(--space-2) * 1.5 );
	--accordion-space--most: 		calc( var(--space-2) * 2.2 );

	/*	The rule under an entry. The half pixel is a hairline where the screen can draw one, and 1px where it cannot	*/
	--accordion-line--least: 		0px;
	--accordion-line--less: 		.5px;
	--accordion-line--default: 		1px;
	--accordion-line--more: 		2px;
	--accordion-line--most: 		3px;

	/*	The sign: none, a plus and a minus, or an arrow turned a quarter when the entry is open. The room is the one the
		sign stands in and the panel is indented by, none where there is no sign	*/
	--accordion-marker--less: 		"";
	--accordion-marker--default: 		"+";
	--accordion-marker--more: 		"\203A";

	--accordion-marker-open--less: 			"";
	--accordion-marker-open--default: 		"\2212";
	--accordion-marker-open--more: 			"\203A";

	--accordion-marker-turn--less: 			0deg;
	--accordion-marker-turn--default: 		0deg;
	--accordion-marker-turn--more: 			90deg;

	--accordion-marker-align--less: 		match-parent;
	--accordion-marker-align--default: 	match-parent;
	--accordion-marker-align--more: 		center;

	--accordion-marker-box--less: 			0em;
	--accordion-marker-box--default: 		1em;
	--accordion-marker-box--more: 			1em;

	/*	The weight of the title: bold, or the weight of the text	*/
	--accordion-weight--default: 			bold;
	--accordion-weight--more: 				normal;
}

/*	The colour of the sign is the accent of the ground it stands on, so the rung of the ink is declared on every element (see
	Nino.css): the accent of the roles is the page's on :root, and on a dark section the sign would keep the one of a light one	*/
:root, :root * {
	--accordion-marker-ink--default: 		var(--color-accent);
}

.nino-accordion {
	font-size: calc( 1em * var(--accordion-scale) );
	border-bottom-width: var(--accordion-line);
}
.nino-accordion-trigger {
	padding: var(--accordion-space) 0;
	font-weight: var(--accordion-weight);
}
.nino-accordion-trigger::before {
	content: var(--accordion-marker);
	width: var(--accordion-marker-box);
	text-align: var(--accordion-marker-align);
	color: var(--accordion-marker-ink);
	transition: transform .2s ease;
}
.nino-accordion[open] > .nino-accordion-trigger::before {
	content: var(--accordion-marker-open);
	transform: rotate( var(--accordion-marker-turn) );
}
.nino-accordion-panel {
	padding: 0 0 var(--accordion-space) var(--accordion-marker-box);
}


/* ==== 18. the knob positions ==== */
:root {
	--accordion-line: var(--accordion-line--default);
	--accordion-marker: var(--accordion-marker--default);
	--accordion-marker-align: var(--accordion-marker-align--default);
	--accordion-marker-box: var(--accordion-marker-box--default);
	--accordion-marker-open: var(--accordion-marker-open--default);
	--accordion-marker-turn: var(--accordion-marker-turn--default);
	--accordion-scale: var(--accordion-scale--default);
	--accordion-space: var(--accordion-space--default);
	--accordion-weight: var(--accordion-weight--default);
	--buttons-case: var(--buttons-case--more);
	--buttons-corners: var(--buttons-corners--least);
	--buttons-hover: var(--buttons-hover--default);
	--buttons-hover-shadow: var(--buttons-hover-shadow--default);
	--buttons-outline: var(--buttons-outline--default);
	--buttons-size: var(--buttons-size--less);
	--buttons-space: var(--buttons-space--default);
	--buttons-spread: var(--buttons-spread--default);
	--buttons-tracking: var(--buttons-tracking--default);
	--card-align: var(--card-align--default);
	--card-align-button: var(--card-align-button--default);
	--card-align-margin: var(--card-align-margin--default);
	--card-border: var(--card-border--least);
	--card-hover: var(--card-hover--default);
	--card-hover-shadow: var(--card-hover-shadow--default);
	--card-shadow: var(--card-shadow--default);
	--card-space: var(--card-space--default);
	--card-subtitle: var(--card-subtitle--less);
	--card-subtitle-case: var(--card-subtitle-case--default);
	--card-title: var(--card-title--less);
	--card-title-case: var(--card-title-case--default);
	--card-title-ground: var(--card-title-ground--default);
	--card-title-ground-fit: var(--card-title-ground-fit--default);
	--card-title-ground-ink: var(--card-title-ground-ink--default);
	--card-title-ground-width: var(--card-title-ground-width--default);
	--card-title-tracking: var(--card-title-tracking--least);
	--card-tone: var(--card-tone--default);
	--footer-border-color: var(--footer-border-color--default);
	--footer-border-size: var(--footer-border-size--default);
	--footer-ground: var(--footer-ground--default);
	--footer-ground-accent: var(--footer-ground-accent--default);
	--footer-ground-border: var(--footer-ground-border--default);
	--footer-ground-focus: var(--footer-ground-focus--default);
	--footer-ground-ink: var(--footer-ground-ink--default);
	--footer-ground-logo-dark: var(--footer-ground-logo-dark--default);
	--footer-ground-logo-light: var(--footer-ground-logo-light--default);
	--footer-ground-subtitle: var(--footer-ground-subtitle--default);
	--footer-ground-title: var(--footer-ground-title--default);
	--footer-height: var(--footer-height--default);
	--footer-nav-case: var(--footer-nav-case--default);
	--footer-position: var(--footer-position--more);
	--footer-position-basis: var(--footer-position-basis--more);
	--footer-position-gap: var(--footer-position-gap--more);
	--footer-scale: var(--footer-scale--default);
	--footer-space: var(--footer-space--default);
	--forms-corners: var(--forms-corners--default);
	--forms-labels: var(--forms-labels--default);
	--forms-labels-align: var(--forms-labels-align--default);
	--forms-labels-block: var(--forms-labels-block--default);
	--forms-labels-cols: var(--forms-labels-cols--default);
	--forms-labels-cut: var(--forms-labels-cut--default);
	--forms-labels-form: var(--forms-labels-form--default);
	--forms-labels-lift: var(--forms-labels-lift--default);
	--forms-labels-pos: var(--forms-labels-pos--default);
	--forms-labels-start: var(--forms-labels-start--default);
	--forms-labels-wide: var(--forms-labels-wide--default);
	--forms-line: var(--forms-line--default);
	--forms-scale: var(--forms-scale--default);
	--forms-space: var(--forms-space--default);
	--header-behaviour: var(--header-behaviour--default);
	--header-behaviour-clear: var(--header-behaviour-clear--default);
	--header-behaviour-collapse: var(--header-behaviour-collapse--default);
	--header-behaviour-keep: var(--header-behaviour-keep--default);
	--header-border-color: var(--header-border-color--default);
	--header-border-size: var(--header-border-size--least);
	--header-cta: var(--header-cta--less);
	--header-cta-scale: var(--header-cta-scale--less);
	--header-ground: var(--header-ground--less);
	--header-ground-accent: var(--header-ground-accent--less);
	--header-ground-border: var(--header-ground-border--less);
	--header-ground-focus: var(--header-ground-focus--less);
	--header-ground-ink: var(--header-ground-ink--less);
	--header-ground-logo-dark: var(--header-ground-logo-dark--less);
	--header-ground-logo-light: var(--header-ground-logo-light--less);
	--header-ground-title: var(--header-ground-title--less);
	--header-height: var(--header-height--default);
	--header-logo: var(--header-logo--default);
	--header-nav: var(--header-nav--least);
	--header-nav-case: var(--header-nav-case--default);
	--header-position: var(--header-position--more);
	--header-position-cta: var(--header-position-cta--more);
	--header-shadow: var(--header-shadow--default);
	--header-space: var(--header-space--less);
	--lists-marker: var(--lists-marker--default);
	--lists-marker-check-box: var(--lists-marker-check-box--default);
	--lists-marker-check-ground: var(--lists-marker-check-ground--default);
	--lists-marker-check-ink: var(--lists-marker-check-ink--default);
	--lists-marker-number-ground: var(--lists-marker-number-ground--default);
	--lists-marker-number-ink: var(--lists-marker-number-ink--default);
	--lists-scale: var(--lists-scale--default);
	--lists-space: var(--lists-space--default);
	--section-align: var(--section-align--default);
	--section-align-column: var(--section-align-column--default);
	--section-align-flow: var(--section-align-flow--default);
	--section-align-margin: var(--section-align-margin--default);
	--section-dim: var(--section-dim--default);
	--section-loud: var(--section-loud--default);
	--section-measure: var(--section-measure--default);
	--section-measure-loud: var(--section-measure-loud--default);
	--section-quiet: var(--section-quiet--default);
	--section-rule: var(--section-rule--full);
	--section-rule-color: var(--section-rule-color--more);
	--section-rule-color-border: var(--section-rule-color-border--more);
	--section-rule-length: var(--section-rule-length--more);
	--section-rule-length-fit: var(--section-rule-length-fit--more);
	--section-space: var(--section-space--default);
	--section-subtitle: var(--section-subtitle--default);
	--section-subtitle-case: var(--section-subtitle-case--default);
	--section-title: var(--section-title--default);
	--section-title-case: var(--section-title-case--default);
	--section-title-ground: var(--section-title-ground--default);
	--section-title-ground-fit: var(--section-title-ground-fit--default);
	--section-title-ground-ink: var(--section-title-ground-ink--default);
	--section-title-ground-width: var(--section-title-ground-width--default);
	--section-title-shadow: var(--section-title-shadow--default);
	--section-title-tracking: var(--section-title-tracking--least);
	--tables-border: var(--tables-border--default);
	--tables-scale: var(--tables-scale--default);
	--tables-space: var(--tables-space--default);
	--tables-stripes: var(--tables-stripes--default);
	--tables-zebra: var(--tables-zebra--default);
	--tables-zebra-ink: var(--tables-zebra-ink--default);
	--tabs-line: var(--tabs-line--default);
	--tabs-line-open: var(--tabs-line-open--default);
	--tabs-scale: var(--tabs-scale--default);
	--tabs-space: var(--tabs-space--default);
	--tiles-dim: var(--tiles-dim--default);
	--tiles-gap: var(--tiles-gap--default);
	--tiles-hover: var(--tiles-hover--default);
	--tiles-hover-zoom: var(--tiles-hover-zoom--default);
	--tiles-place: var(--tiles-place--default);
	--tiles-space: var(--tiles-space--default);
	--tiles-subtitle: var(--tiles-subtitle--default);
	--tiles-text: var(--tiles-text--default);
	--tiles-title: var(--tiles-title--default);
	--tiles-title-tracking: var(--tiles-title-tracking--default);
}

:root, :root * {
	--section-title-ink: var(--section-title-ink--default);
	--section-subtitle-ink: var(--section-subtitle-ink--default);
	--tiles-title-ink: var(--tiles-title-ink--default);
	--tiles-subtitle-ink: var(--tiles-subtitle-ink--default);
	--card-title-ink: var(--card-title-ink--default);
	--card-subtitle-ink: var(--card-subtitle-ink--default);
	--forms-edge: var(--forms-edge--default);
	--forms-label: var(--color-subtitle);
	--tabs-active: var(--tabs-active--default);
	--accordion-marker-ink: var(--accordion-marker-ink--default);
}

/* ==== 19. the theme ==== */
.nino-social {justify-content: center;}
:root {
	--section-rule:4px;
  --color-title: var(--counter-card-title);
}
.nino-title-highlight {
	display:inline-block;
	padding:.5rem 1rem;
	color: var(--counter-card-bg);
	background-color:color-mix( in srgb, var(--color-ground) var(--card-title-ground-ink), var(--color-title) )
}
.nino-social-item {
	    display: flex
}
.nino-striketrough {
	text-decoration: line-through;
}
#footer__nav {
	display:none;
}
.nino-footer-legal .nino-grid-row {
	justify-content: space-between;
}
@media (max-width: 768px) {

	.nino-footer-legal .nino-grid-row {
	    flex-direction: column;
	}
	.nino-footer-copyright, .nino-footer-localepicker {
		justify-content: center;
	}
	#legal__nav {
		margin: 0 auto;
    text-align: center;
	}
	#legal__nav ul {
		display: flex;
		gap: var(--space-3);
	}
}/**
 *	Nino - Social links
 *	social.css		The row the links stand in and the size of their icons, and
 *					nothing else. Bundled into the project's own /.cache/style.css
 *					the same way the kernel bundles Nino.css (from the manifest's
 *					assets) - never rendered through the fill/shortcode engine, so
 *					nothing in here is a textfill.
 *
 *					The icons are Lucide's line icons, drawn in currentColor: a
 *					link is the colour the frame around it gives its links, in a
 *					dark section and under forced colours alike. fill: none is set
 *					here as well as on the svg, because a rule elsewhere that fills
 *					svgs - Nino.css does it for .nino-icon - beats the attribute and
 *					turns a line icon into a blot.
 *
 *					What a look of the Design feature moves (design/) are the
 *					properties declared first: --social-size, the size of an icon,
 *					--social-gap between two links, --social-stroke, the weight of
 *					the line, --social-icon, the tone of the icon, and --social-badge,
 *					the ground a look that paints a badge puts behind an icon, with
 *					the parts the palette solves for it. Each has the value the row
 *					was drawn with until now as its default, so that the links look
 *					as they always did until a look moves one. Lengths, numbers and
 *					the ground stand in :where(:root), the tone of the icon in
 *					:where(*) so that it is the tone of the ground an element stands
 *					on, as the Design feature's manual asks. :where() has no
 *					specificity and the bundle lists this file after the sheet the
 *					Design feature writes, so a look moves a default by saying it on
 *					:root. No colour literal, and no !important.
 *
 *					The size of a call - [social size="small"] - is the class
 *					nino-social--small and a factor of the size of the site, not a
 *					size of its own: the knob sets what the site draws, the attribute
 *					is the exception of one list, and the exception is worked out
 *					from the setting rather than put in its place. Nothing here moves
 *					a link on hover: that is a style of the Design feature.
 */

:where(:root) {
	/*	The size of an icon, the space between two links and the weight of the line the icons are drawn with. A look that frames the
		icon in a badge or a ring sizes the icon inside it	*/
	--social-size: 1.5em;
	--social-gap: var(--space-2);
	--social-stroke: 2;

	/*	The ground of a badge, with the parts of it a look reads: the text colour on it, the quieter one, the link, the line round it
		and the focus - what the icon on it is read with. A surface of the palette and no colour of its own	*/
	--social-badge: var(--color-section-alt-bg);
	--social-badge-on: var(--color-section-alt-text);
	--social-badge-on-muted: var(--color-section-alt-text);
	--social-badge-link: var(--color-accent-alt);
	--social-badge-border: var(--color-border-alt);
	--social-badge-focus: var(--color-focus-alt);
}

:where(*) {
	--social-icon: currentColor;
}

/*	The row gap is half the column gap: the space between two links, and between two lines of them, is the one the row had	*/
.nino-social {
	--nino-social-size: var(--social-size);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc( var(--social-gap) / 2 ) var(--social-gap);
	list-style: none;
}

/*	The list's reset in :where(), which has no specificity: the spacing classes
	the Builder writes (.nino-mt-3) have the same weight as .nino-social, and
	this file comes later in the bundle, so a reset beside them would cancel
	every side	*/
:where(.nino-social) {
	margin: 0;
	padding: 0;
}

/*	The two sizes of a call are factors of the size of the site - three quarters and four thirds, which is what 1.125em and 2em
	were of 1.5em - and the knob moves them with it	*/
.nino-social--small {
	--nino-social-size: calc( var(--social-size) * .75 );
}

.nino-social--large {
	--nino-social-size: calc( var(--social-size) * 4 / 3 );
}

.nino-social-item {
	margin: 0;
}

/*	In a list, icon and name side by side, and 24px at the least however small
	the icon: the smallest target WCAG 2.5.8 accepts, without making a thin
	utility line any taller */
.nino-social .nino-social-link {
	display: inline-flex;
	align-items: center;
	min-width: 24px;
	min-height: 24px;
}

/*	Out of a list - [social-link] in running text, [social-icon] beside a word
	- the name is text of the line like any other, and the icon sits on it the
	way a capital does, a little below the baseline */
.nino-social-icon {
	/*	The side of the icon: the size of the list it stands in, else five sixths of the size of the site, which is the 1.25em a
		lone icon always was. A look that draws a badge or a ring round the icon reads it for the room it leaves	*/
	--nino-social-icon-size: var(--nino-social-size, calc( var(--social-size) * 5 / 6 ));
	display: inline-block;
	flex: none;
	width: var(--nino-social-icon-size);
	height: var(--nino-social-icon-size);
	vertical-align: -.25em;
	color: var(--social-icon);
}

.nino-social-icon + .nino-social-label {
	margin-inline-start: .4em;
}

.nino-social-icon > svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--social-stroke);
}
/**
 *	Nino - Logos
 *	logos.css		The row of logos [logos] renders, and nothing else. Bundled into
 *					the project's own /.cache/style.css the same way the kernel bundles
 *					Nino.css (the manifest's `assets` name it, and see
 *					docs/development.md, "Assets Are Not Templates") - never
 *					rendered through the fill/shortcode engine, so nothing in here
 *					is a textfill.
 *
 *					The row is a wrapped, centred line of pictures, as the kernel drew
 *					its logo strip until now: the space between them, a picture that
 *					fits its box and grey pictures that take their colour under the
 *					pointer and under the keyboard focus. Everything else - a grid, a
 *					band, cards - is a look of the Design feature (design/), and so is
 *					the choice of the tone of the pictures.
 *
 *					The height of a logo comes in as --nino-logos-size, which the
 *					class of the row sets from --logos-height: s three quarters of it,
 *					m the height and l one and a half times. The number of logos comes
 *					in as --nino-logos-count, written onto the row by the shortcode;
 *					the band reads it for its speed.
 *
 *					What a look of the Design feature moves are four properties and
 *					a ground with its parts - --logos-height, --logos-gap,
 *					--logos-corners and --logos-ground, with the text colour, the line,
 *					the shadow and the pair of the logo of that ground - and this file
 *					declares them with the row as it was drawn until now as their
 *					default, so that a row looks as it always did until one of them is
 *					moved. They stand in :where(:root), as the Design feature's manual
 *					asks of lengths and of a ground. The bundle lists this file after
 *					the sheet the Design feature writes and :where() has no
 *					specificity, so a look moves a default by saying it on :root. A
 *					rule of a look names the row too, for a specificity of its own
 *					that wins whichever file comes first. No colour literal, no
 *					!important.
 *
 *					The class names are this feature's own. Nino.css, which sits in the
 *					same bundle, may carry a public .nino-logos and .nino-logos-item -
 *					the kernel's own logo strip - and two rule sets for one name in a
 *					bundle both apply. No rule here names a class the kernel
 *					styles - the three the template gives the pictures, for the
 *					ground, are the kernel's own and are styled there - and the
 *					feature's test holds it that way.
 *
 *					The second list, the copy, is there for the band and hidden for
 *					every other look. The pause button after the two lists is hidden
 *					until logos.js finds a track that runs an animation.
 */

:where(:root) {
	/*	The height of a logo at m, and the space between logos. 3.5rem and three rems are what the row has always been	*/
	--logos-height: 3.5rem;
	--logos-gap: var(--space-4);

	/*	The time one logo takes to pass in a band: the run of a band is the number of logos times this. Only the look Band reads it	*/
	--logos-speed: 5s;

	/*	The corners of a cell and its ground, with the parts of a ground a look reads: the text on it, the line round it, the
		shadow under it and the pair of the logo, which says which picture of a logo with two is seen on it. A cell that has a
		ground of its own is a surface of the palette and no colour of its own, and it does not follow a dark section: it is the
		same surface on every section, light on a dark one	*/
	--logos-corners: var(--radius-large);
	--logos-ground: var(--color-section-default-bg);
	--logos-ground-on: var(--color-section-default-text);
	--logos-ground-border: var(--color-border-default);
	--logos-ground-shadow: color-mix( in srgb, var(--color-section-default-text) 15%, transparent );
	--logos-ground-logo-light: var(--color-section-default-logo-light);
	--logos-ground-logo-dark: var(--color-section-default-logo-dark);
}

.nino-logos-strip {
	--nino-logos-size: var(--logos-height);
}
.nino-logos-strip--h-s {
	--nino-logos-size: calc(var(--logos-height) * .75);
}
.nino-logos-strip--h-m {
	--nino-logos-size: var(--logos-height);
}
.nino-logos-strip--h-l {
	--nino-logos-size: calc(var(--logos-height) * 1.5);
}

.nino-logos-strip-view {
	margin: 0;
}

.nino-logos-strip-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--logos-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*	The copy is for the band alone: every other look is one list, and the second is not there for a visitor and not for a screen reader	*/
.nino-logos-strip-copy {
	display: none;
}

.nino-logos-strip-item {
	margin: 0;
	padding: 0;
}

.nino-logos-strip-link {
	display: block;
}

/*	The button that pauses a band: logos.js takes the attribute off where the track runs an animation. The kernel's own button rule
	gives it a display, which [hidden] would not beat	*/
.nino-logos-strip-pause {
	display: block;
	margin: var(--space-1) auto 0;
}
.nino-logos-strip-pause[hidden] {
	display: none;
}
.nino-logos-strip-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/*	The picture fills its height and has the width that gives it; the size of the file a logo was set into its box as is the
	ratio its width and height say, and a picture that is wider than the room it has keeps its proportions inside it	*/
.nino-logos-strip-img {
	width: auto;
	max-width: 100%;
	height: var(--nino-logos-size);
	object-fit: contain;
	opacity: .5;
	filter: grayscale(1);
	transition: opacity .2s ease, filter .2s ease;
}

/*	The tone of the pictures until the Design feature, under Styles, says another: grey, in colour under the pointer and under the
	focus of the keyboard. :where() keeps the rule as light as the one above, so that the style Grey, which names the row, stays
	grey under the pointer too	*/
:where(.nino-logos-strip-item:hover, .nino-logos-strip-item:focus-within) .nino-logos-strip-img {
	opacity: 1;
	filter: grayscale(0);
}

/*	Somebody asked for less movement: the pictures change at once	*/
@media (prefers-reduced-motion: reduce) {
	.nino-logos-strip-img {
		transition: none;
	}
}