/* ==========================================================================
   Foundation Shade Finder — "Booth"

   A colour-matching viewing booth, told as a data story.

   Two rules hold the whole thing together:

   1. Every surface is achromatic, chroma exactly 0. A colour is never judged
      against a tinted ground, so the page has no colour of its own and all the
      colour on it comes from skin tones, swatches and the charts built out of
      them. One page-wide near-white, no dark bands: rhythm comes from rules,
      space and the size of the type, the way it does in print.
   2. The one non-neutral is an electric blue, used for links, marks, rules
      that need to carry and the position marker. Blue is the complement of
      every skin tone, so it is the single hue that can never be mistaken for a
      sample, and it never sits directly against one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

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

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

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Every colour is declared twice: sRGB first, OKLCH second. A browser
	   without oklch() drops the second declaration and keeps the first. Without
	   the pair, an unsupported value makes var() invalid at computed-value time
	   and the page renders close to unstyled, which is still a real slice of
	   mobile traffic. The hex values are the exact conversions, so the two
	   declarations only differ in gamut precision. */

	/* Surfaces. All chroma 0. One page-wide near-white with a slightly cooler
	   sunk tone for insets; no dark band anywhere, because an inverted section
	   changes how every swatch above and below it reads. */
	--surround: #f7f7f7;
	--surround: oklch(0.975 0 0);
	--surround-edge: #dbdbdb;
	--surround-edge: oklch(0.89 0 0);
	--panel: #ffffff;
	--panel: oklch(1 0 0);
	--panel-sunk: #f0f0f0;
	--panel-sunk: oklch(0.955 0 0);
	--ink-block: #ebebeb;
	--ink-block: oklch(0.935 0 0);

	/* Ink */
	--ink: #232323;
	--ink: oklch(0.24 0 0);
	--ink-soft: #565656;
	--ink-soft: oklch(0.46 0 0);
	/* Only for type sitting on an ink fill: buttons and the skip link. */
	--ink-inv: #f7f7f7;
	--ink-inv: oklch(0.975 0 0);

	/* Rules. --edge is for anything you can click: WCAG wants the boundary of a
	   control at 3:1 against what is behind it, which the softer rules miss. */
	--rule: #d4d4d4;
	--rule: oklch(0.87 0 0);
	--rule-firm: #ababab;
	--rule-firm: oklch(0.74 0 0);
	--edge: #808080;
	--edge: oklch(0.60 0 0);

	/* The one accent: an electric blue no skin tone can be mistaken for. It
	   carries links, marks and the reading marker, and never sits against a
	   swatch. --signal-bright is the same hue turned up for small marks. */
	--signal: #2727e6;
	--signal: oklch(0.42 0.26 268);
	--signal-bright: #4b4bff;
	--signal-bright: oklch(0.52 0.28 268);
	--signal-wash: #eaeaff;
	--signal-wash: oklch(0.94 0.04 268);

	/* Type. One grotesque doing everything, mono for numbers only. */
	--sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system,
		'Segoe UI', Roboto, sans-serif;
	--mono: 'Martian Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

	--step-display: clamp(2.5rem, 1.55rem + 3.8vw, 4.5rem);
	--step-h2: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
	--step-h3: clamp(1.3rem, 1.13rem + 0.7vw, 1.65rem);
	--step-h4: clamp(1.08rem, 1.02rem + 0.28vw, 1.24rem);
	--step-body: clamp(1rem, 0.975rem + 0.11vw, 1.075rem);
	--step-lead: clamp(1.1rem, 1.02rem + 0.36vw, 1.32rem);
	--step-small: 0.875rem;
	--step-data: 0.7rem;

	/* Space */
	--gutter: clamp(1.15rem, 0.7rem + 2vw, 2.5rem);
	--section: clamp(3.5rem, 2.2rem + 5.4vw, 7rem);
	--wrap: 76rem;
	--measure: 66ch;

	/* Motion */
	--out: cubic-bezier(0.22, 1, 0.36, 1);
	--fast: 160ms;
	--mid: 320ms;
	--slow: 620ms;

	/* Depth */
	--z-base: 1;
	--z-sticky: 20;
	--z-overlay: 40;
	--z-modal: 60;

	--radius: 4px;
	--radius-chip: 2px;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

* {
	margin: 0;
}

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

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

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--surround);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--step-body);
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

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

a {
	color: inherit;
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

:where(h1, h2) {
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

:where(h3, h4) {
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 2px;
	border-radius: 1px;
}

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

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-modal);
	background: var(--ink);
	color: var(--ink-inv);
	padding: 0.75rem 1.1rem;
	font-weight: 600;
}

.skip:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}

.wrap--narrow {
	width: min(100% - var(--gutter) * 2, 52rem);
	margin-inline: auto;
}

.band {
	padding-block: var(--section);
}

/* A ruled band: the page separates by line and space rather than by a change
   of background, so no swatch is ever judged against a different ground. */
.band--ruled {
	border-top: 1px solid var(--surround-edge);
}

.band--ruled-firm {
	border-top: 2px solid var(--ink);
}

.band--tight {
	padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
}

/* Was an inverted band. Now a band set apart by rules and a hair of tone,
   which keeps every swatch on the page under the same light. */
.band--set {
	background: var(--ink-block);
	border-block: 1px solid var(--surround-edge);
}

.prose > * + * {
	margin-top: 1.1em;
}

.lead {
	font-size: var(--step-lead);
	line-height: 1.5;
	max-width: 46ch;
}

.muted {
	color: var(--ink-soft);
}

.measure {
	max-width: var(--measure);
}

/* Mono data type. Only ever wraps numbers, codes and units — never prose. */
.data {
	font-family: var(--mono);
	font-size: var(--step-data);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.num {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   5. Panels
   -------------------------------------------------------------------------- */

.panel {
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.07);
}

.panel--pad {
	padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
}

.panel--flush {
	box-shadow: 0 2px 14px rgb(0 0 0 / 0.1);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
	--btn-bg: var(--signal);
	--btn-fg: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.82rem 1.5rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-bg);
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--fast) var(--out), background var(--fast) linear,
		opacity var(--fast) linear;
}

.btn:hover {
	--btn-bg: var(--signal-bright);
}

.btn:active {
	transform: translateY(1px);
}

.btn[disabled],
.btn.is-busy {
	opacity: 0.55;
	cursor: progress;
}

.btn--lg {
	padding: 1rem 1.9rem;
	font-size: 1.06rem;
}

.btn--block {
	width: 100%;
}

.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--ink);
	border-color: var(--edge);
}

.btn--ghost:hover {
	--btn-bg: oklch(0.9 0 0);
	--btn-fg: var(--ink);
}

.btn--invert {
	--btn-bg: var(--ink);
	--btn-fg: var(--panel);
	border-color: var(--ink);
}

.btn--invert:hover {
	--btn-bg: var(--signal);
	border-color: var(--signal);
}

.link {
	color: var(--signal);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	text-decoration-color: color-mix(in oklch, var(--signal) 40%, transparent);
	transition: text-decoration-color var(--fast) linear;
}

.link:hover {
	text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   7. Masthead
   -------------------------------------------------------------------------- */

.masthead {
	border-bottom: 1px solid var(--ink);
	background: var(--surround);
}

.masthead__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.75rem;
	padding-block: 0.85rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	margin-right: auto;
}

.brand__mark {
	width: 26px;
	height: 26px;
	flex: none;
}

.brand__name {
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -0.03em;
	line-height: 1.15;
	white-space: nowrap;
}

.brand__name span {
	display: block;
	font-family: var(--mono);
	font-size: 0.56rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 0.15rem;
}

.masthead__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.4rem;
	list-style: none;
	padding: 0;
	font-size: 0.94rem;
}

.masthead__nav a {
	text-decoration: none;
	font-weight: 500;
	padding-block: 0.2rem;
	border-bottom: 1px solid transparent;
	transition: border-color var(--fast) linear;
}

.masthead__nav a:hover {
	color: var(--signal);
	border-bottom-color: var(--signal);
}

/* Mobile menu. Four links wrapping onto a second row pushes the whole page
   down on a phone, so below 48rem they fold behind a toggle. */
.masthead__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	width: 2.5rem;
	height: 2.5rem;
	background: none;
	border: 1px solid var(--edge);
	border-radius: var(--radius-chip);
	cursor: pointer;
}

.masthead__bars {
	display: grid;
	gap: 3px;
	width: 16px;
}

.masthead__bars i {
	display: block;
	height: 2px;
	background: currentColor;
	transition: translate var(--mid) var(--out), rotate var(--mid) var(--out),
		opacity var(--fast) linear;
}

[aria-expanded='true'] .masthead__bars i:first-child {
	translate: 0 5px;
	rotate: 45deg;
}

[aria-expanded='true'] .masthead__bars i:nth-child(2) {
	opacity: 0;
}

[aria-expanded='true'] .masthead__bars i:last-child {
	translate: 0 -5px;
	rotate: -45deg;
}

@media (max-width: 47.99rem) {
	.masthead__toggle {
		display: inline-flex;
	}

	.masthead__menu {
		flex-basis: 100%;
		overflow: hidden;
	}

	.masthead.is-collapsed .masthead__menu {
		display: none;
	}

	.masthead__nav {
		flex-direction: column;
		gap: 0;
		padding-bottom: 0.35rem;
	}

	.masthead__nav li + li {
		border-top: 1px solid var(--surround-edge);
	}

	.masthead__nav a {
		display: block;
		padding-block: 0.7rem;
		font-size: 1rem;
	}

	.masthead__nav a:hover {
		border-bottom-color: transparent;
	}
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	padding-block: clamp(3.25rem, 2rem + 4.5vw, 6rem) clamp(5.5rem, 3rem + 9vw, 9rem);
	border-bottom: 1px solid var(--surround-edge);
}

.hero__grid {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 3.5rem);
	align-items: center;
}

@media (min-width: 62rem) {
	.hero__grid {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	}
}

/* 20ch is what it takes for "instead of guessed." to hold together on one
   line. Narrower and the headline breaks after "instead", which reads badly. */
.hero h1 {
	font-size: var(--step-display);
	letter-spacing: -0.04em;
	max-width: 17ch;
}

.hero__sub {
	margin-top: 1.35rem;
	font-size: var(--step-lead);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 46ch;
}

.hero__meta {
	margin-top: 1.9rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.6rem;
	color: var(--ink-soft);
	border-top: 1px solid var(--ink);
	padding-top: 0.85rem;
}

/* The skin-tone field: a chip atlas of the human skin gamut. */
.field {
	position: relative;
	margin: 0;
}

.field__plate {
	position: relative;
	display: block;
	border: 1px solid var(--rule);
	background: var(--panel);
	padding: clamp(0.5rem, 0.3rem + 0.8vw, 0.85rem);
}

.field__grid {
	display: grid;
	grid-template-columns: repeat(22, minmax(0, 1fr));
	gap: 2px;
}

.field__chip {
	aspect-ratio: 1;
	background: var(--c);
	border-radius: 1px;
}

/* Only the live grid reacts. The result page renders the same field flat,
   because the marker on it is the point, not browsing. */
.field__grid--live {
	cursor: crosshair;
	outline-offset: 6px;
}

.field__grid--live .field__chip {
	transition: box-shadow var(--fast) linear, scale var(--fast) var(--out);
}

.field__grid--live .field__chip:hover,
.field__chip.is-on {
	box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--signal);
	border-radius: 0;
	position: relative;
	z-index: var(--z-base);
	scale: 1.35;
}

.field__readout {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-top: 1rem;
	min-height: 4.25rem;
}

.field__readout-chip {
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	transition: background var(--mid) linear;
}

.field__readout-text {
	font-size: var(--step-small);
	color: var(--ink-soft);
	line-height: 1.5;
}

.field__readout-text b {
	display: block;
	color: var(--ink-inv);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin-bottom: 0.15rem;
}

.field__axis {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.7rem;
	color: var(--ink-soft);
}

.note {
	margin: 2.25rem auto 0;
	font-size: var(--step-small);
	color: var(--ink-soft);
	max-width: 72ch;
	text-align: center;
}

/* The measured-position marker, placed with inline left/top percentages. */
.field__marker {
	position: absolute;
	width: 34px;
	height: 34px;
	translate: -50% -50%;
	border: 2px solid var(--signal-bright);
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.55);
	pointer-events: none;
	animation: marker-land var(--slow) var(--out) both;
}

.field__marker::before,
.field__marker::after {
	content: '';
	position: absolute;
	background: var(--signal-bright);
}

.field__marker::before {
	left: 50%;
	top: -14px;
	bottom: -14px;
	width: 2px;
	translate: -50% 0;
	opacity: 0.65;
}

.field__marker::after {
	top: 50%;
	left: -14px;
	right: -14px;
	height: 2px;
	translate: 0 -50%;
	opacity: 0.65;
}

@keyframes marker-land {
	from {
		opacity: 0;
		scale: 2.6;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

/* --------------------------------------------------------------------------
   9. Sample card (the uploader)
   -------------------------------------------------------------------------- */

.sampler {
	margin-top: calc(clamp(5.5rem, 3rem + 9vw, 9rem) * -0.62);
	position: relative;
	z-index: var(--z-base);
}

.sampler__card {
	padding: clamp(1.25rem, 0.85rem + 1.9vw, 2.25rem);
}

.sampler__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-bottom: 1rem;
	margin-bottom: 1.35rem;
	border-bottom: 1px solid var(--rule);
}

.sampler__head h2 {
	font-size: var(--step-h3);
}

.sampler__head .data {
	color: var(--ink-soft);
}

/* Registration-mark drop frame: a crop frame, not a dashed box. */
.drop {
	position: relative;
	display: grid;
	place-items: center;
	gap: 0.5rem;
	min-height: clamp(9.5rem, 7rem + 9vw, 13rem);
	padding: 1.75rem 1.25rem;
	text-align: center;
	background: var(--panel-sunk);
	border-radius: var(--radius-chip);
	transition: background var(--fast) linear;
}

.drop::before,
.drop::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid var(--edge);
	border-radius: var(--radius-chip);
	--mark: 18px;
	-webkit-mask: linear-gradient(#000 0 0) top left / var(--mark) var(--mark) no-repeat,
		linear-gradient(#000 0 0) top right / var(--mark) var(--mark) no-repeat,
		linear-gradient(#000 0 0) bottom left / var(--mark) var(--mark) no-repeat,
		linear-gradient(#000 0 0) bottom right / var(--mark) var(--mark) no-repeat;
	mask: linear-gradient(#000 0 0) top left / var(--mark) var(--mark) no-repeat,
		linear-gradient(#000 0 0) top right / var(--mark) var(--mark) no-repeat,
		linear-gradient(#000 0 0) bottom left / var(--mark) var(--mark) no-repeat,
		linear-gradient(#000 0 0) bottom right / var(--mark) var(--mark) no-repeat;
}

.drop::after {
	inset: 7px;
	border-color: var(--ink-soft);
	--mark: 11px;
	opacity: 0.55;
}

.drop.is-over {
	background: oklch(0.91 0 0);
}

.drop__prompt {
	font-size: var(--step-h4);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.drop__hint {
	font-size: var(--step-small);
	color: var(--ink-soft);
	max-width: 40ch;
}

.drop input[type='file'] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.drop input[type='file']:focus-visible {
	outline-offset: -4px;
}

/* Selected-file state */
.drop__picked {
	display: none;
	align-items: center;
	gap: 1rem;
	text-align: left;
	width: 100%;
	max-width: 30rem;
}

.drop.has-file .drop__picked {
	display: flex;
}

.drop.has-file .drop__empty {
	display: none;
}

.drop__thumb {
	width: 76px;
	height: 76px;
	flex: none;
	border-radius: var(--radius-chip);
	border: 1px solid var(--rule-firm);
	background: var(--panel) center / cover no-repeat;
}

.drop__name {
	font-weight: 600;
	overflow-wrap: anywhere;
	line-height: 1.35;
}

.sampler__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.25rem;
	margin-top: 1.35rem;
}

.sampler__actions .btn {
	flex: 1 1 15rem;
}

.sampler__note {
	flex: 1 1 16rem;
	font-size: var(--step-small);
	color: var(--ink-soft);
}

.spinner {
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}

@keyframes spin {
	to {
		rotate: 360deg;
	}
}

/* --------------------------------------------------------------------------
   10. Notices
   -------------------------------------------------------------------------- */

.notice {
	display: flex;
	gap: 0.85rem;
	padding: 0.95rem 1.15rem;
	margin-bottom: 1.35rem;
	background: var(--panel-sunk);
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius-chip);
	font-size: var(--step-small);
	line-height: 1.5;
}

.notice__key {
	flex: none;
	width: 2.1rem;
	height: 2.1rem;
	display: grid;
	place-items: center;
	background: var(--ink);
	color: var(--panel);
	border-radius: 50%;
	font-weight: 700;
	font-size: 1.05rem;
}

.notice strong {
	display: block;
	font-size: 1rem;
}

/* --------------------------------------------------------------------------
   11. Chips and swatches
   -------------------------------------------------------------------------- */

.chip {
	display: block;
	background: var(--c, var(--panel-sunk));
	border-radius: var(--radius-chip);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.16);
}

/* Side-by-side comparison: your skin against the matched shade, no seam. */
.compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: clamp(6.5rem, 4.5rem + 7vw, 10rem);
	border-radius: var(--radius-chip);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
}

.compare > * {
	background: var(--c);
}

.compare__legend {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 0.7rem;
}

.compare__legend > * + * {
	text-align: right;
}

.compare__legend .data {
	color: var(--ink-soft);
	display: block;
	margin-bottom: 0.15rem;
}

/* --------------------------------------------------------------------------
   12. Readout (instrument panel)
   -------------------------------------------------------------------------- */

/* Five readings, so the row count rarely divides evenly. Separators are drawn
   on the cells rather than as grid gaps, otherwise the leftover cell shows up
   as a stray grey block. */
.readout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	border: 1px solid var(--rule);
	border-radius: var(--radius-chip);
	overflow: hidden;
	background: var(--panel);
}

.readout > div {
	padding: 0.9rem 1rem;
	box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
}

.readout dt {
	font-family: var(--mono);
	font-size: var(--step-data);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.readout dd {
	margin: 0.35rem 0 0;
	font-family: var(--mono);
	font-size: 1.3rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.readout dd small {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: normal;
	font-variant-numeric: normal;
	color: var(--ink-soft);
	display: block;
	margin-top: 0.3rem;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   13. Section headings
   -------------------------------------------------------------------------- */

/* Everything below the hero is centred on the page axis: headings, intros and
   the blocks themselves. What stays left aligned inside its block is anything
   that gets read rather than glanced at, which is FAQ answers, product rows and
   long prose. Centred paragraphs of that length are harder to read, and the
   centring is meant to compose the page, not to fight the reader. */
/* Widths are set on the heading and the paragraph, never on the wrapper. A ch
   on the wrapper is measured in body type, so it strangles a 46px heading down
   to a body-width column. Each element gets a measure in its own type size. */
.head {
	margin-inline: auto;
	text-align: center;
}

.head h2 {
	font-size: var(--step-h2);
	letter-spacing: -0.035em;
	max-width: 20ch;
	margin-inline: auto;
}

.head p {
	margin: 1.1rem auto 0;
	max-width: 56ch;
	color: var(--ink-soft);
	font-size: var(--step-lead);
	line-height: 1.5;
}

.head--wide h2 {
	max-width: 26ch;
}

/* --------------------------------------------------------------------------
   14. Method: the three measured steps
   -------------------------------------------------------------------------- */

.method {
	display: grid;
	gap: 1px;
	margin-top: 2.75rem;
	background: var(--rule-firm);
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	overflow: hidden;
}

@media (min-width: 48rem) {
	.method {
		grid-template-columns: repeat(3, 1fr);
	}
}

.method__step {
	background: var(--panel);
	padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.method__fig {
	background: var(--panel-sunk);
	border-radius: var(--radius-chip);
	padding: 1rem;
}

.method__fig svg {
	width: 100%;
	height: auto;
}

.method__step h3 {
	font-size: var(--step-h4);
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.method__step h3 i {
	font-family: var(--mono);
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--ink-soft);
}

.method__step p {
	font-size: var(--step-small);
	color: var(--ink-soft);
	line-height: 1.55;
	margin-top: -0.35rem;
}

/* --------------------------------------------------------------------------
   15. Undertone triptych
   -------------------------------------------------------------------------- */

.tones {
	display: grid;
	gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
	margin-top: 2.5rem;
}

@media (min-width: 46rem) {
	.tones {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tone__strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	height: clamp(3.5rem, 2.5rem + 3vw, 5rem);
	border-radius: var(--radius-chip);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.16);
}

.tone__strip > * {
	background: var(--c);
}

.tone h3 {
	margin-top: 1rem;
	font-size: var(--step-h4);
}

.tone p {
	margin-top: 0.5rem;
	font-size: var(--step-small);
	color: var(--ink-soft);
	line-height: 1.55;
}

.tone dl {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--rule);
	font-size: var(--step-small);
}

.tone dt {
	font-family: var(--mono);
	font-size: var(--step-data);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.tone dd {
	margin: 0.15rem 0 0.7rem;
}

.tone dd:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   16. Checklist (photo conditions)
   -------------------------------------------------------------------------- */

/* Stacked and centred rather than two columns, so the whole page below the
   hero reads down one axis. */
.split {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
	justify-items: center;
}

.split > * {
	width: 100%;
	max-width: 64rem;
}

.checks {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--rule-firm);
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	overflow: hidden;
}

.checks li {
	background: var(--panel);
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	align-items: start;
	gap: 0.35rem 0.75rem;
	padding: 1rem 1.15rem;
}

.checks b {
	grid-column: 2;
	font-weight: 600;
}

.checks span {
	grid-column: 2;
	font-size: var(--step-small);
	color: var(--ink-soft);
	line-height: 1.5;
}

.checks svg {
	grid-row: span 2;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */

.faq {
	margin-top: 2.5rem;
	border-top: 1px solid var(--rule-firm);
}

.faq details {
	border-bottom: 1px solid var(--rule-firm);
}

.faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.15rem 0;
	font-size: var(--step-h4);
	font-weight: 600;
	letter-spacing: -0.015em;
	cursor: pointer;
	list-style: none;
	transition: color var(--fast) linear;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary:hover {
	color: var(--ink-soft);
}

.faq summary::after {
	content: '';
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	margin-top: 0.42rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 0h2v16H7z'/%3E%3Cpath d='M0 7h16v2H0z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 0h2v16H7z'/%3E%3Cpath d='M0 7h16v2H0z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	transition: rotate var(--mid) var(--out);
}

.faq details[open] summary::after {
	rotate: 45deg;
}

.faq__body {
	padding-bottom: 1.35rem;
	max-width: var(--measure);
	color: var(--ink-soft);
}

.faq__body > * + * {
	margin-top: 0.8rem;
}

/* --------------------------------------------------------------------------
   18. Result page
   -------------------------------------------------------------------------- */

.result__head {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
	align-items: center;
}

@media (min-width: 50rem) {
	.result__head {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

.result__portrait {
	width: clamp(7rem, 5rem + 9vw, 11rem);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-chip);
	border: 1px solid var(--rule-firm);
}

.result__head h1 {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
	letter-spacing: -0.032em;
}

.verdict {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1.1rem;
	margin-top: 1.15rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--rule);
}

.verdict__de {
	font-family: var(--mono);
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.verdict__text {
	font-size: var(--step-body);
	color: var(--ink-soft);
	max-width: 40ch;
}

/* Matched products */
.matches {
	list-style: none;
	padding: 0;
	margin-top: 1.5rem;
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
}

.match {
	background: var(--panel);
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 0.35rem 1.1rem;
	padding: 1.1rem 1.25rem;
	align-items: start;
}

@media (min-width: 44rem) {
	.match {
		grid-template-columns: 3.25rem minmax(0, 1fr) auto;
		align-items: center;
	}
}

.match__chip {
	grid-row: span 3;
	aspect-ratio: 1;
	align-self: start;
}

@media (min-width: 44rem) {
	.match__chip {
		grid-row: span 2;
	}
}

.match__brand {
	font-family: var(--mono);
	font-size: var(--step-data);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.match__name {
	font-weight: 600;
	line-height: 1.3;
}

.match__name em {
	font-style: normal;
	font-family: var(--mono);
	font-size: 0.82em;
	letter-spacing: -0.02em;
	background: var(--panel-sunk);
	border-radius: 2px;
	padding: 0.1em 0.35em;
	margin-left: 0.35em;
}

.match__spec {
	grid-column: 2;
	font-size: var(--step-small);
	color: var(--ink-soft);
}

.match .btn {
	grid-column: 2;
	margin-top: 0.55rem;
	justify-self: start;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
}

@media (min-width: 44rem) {
	.match .btn {
		grid-row: span 2;
		grid-column: 3;
		margin-top: 0;
		align-self: center;
	}
}

/* Neighbouring tones */
.neighbours {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
}

@media (min-width: 40rem) {
	.neighbours {
		grid-template-columns: 1fr 1fr;
	}
}

.neighbour {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem 1.15rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--panel);
}

.neighbour .chip {
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
}

.neighbour p {
	font-size: var(--step-small);
	line-height: 1.4;
}

.neighbour .data {
	color: var(--ink-soft);
	display: block;
	margin-bottom: 0.2rem;
}

/* Cross-promotion */
.tools {
	list-style: none;
	padding: 0;
	margin-top: 1.75rem;
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
}

@media (min-width: 42rem) {
	.tools {
		grid-template-columns: 1fr 1fr;
	}
}

.tools li {
	background: var(--panel);
}

.tools a {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.2rem;
	text-decoration: none;
	transition: background var(--fast) linear;
}

.tools a:hover {
	background: var(--panel-sunk);
}

.tools div {
	min-width: 0;
}

.tools b {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.tools span {
	font-size: var(--step-small);
	color: var(--ink-soft);
	line-height: 1.4;
}

.tools__go {
	margin-left: auto;
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	opacity: 0.55;
}

/* Sticky app bar */
.appbar {
	position: sticky;
	bottom: 0;
	z-index: var(--z-sticky);
	background: var(--panel);
	border-top: 1px solid var(--ink);
	box-shadow: 0 -6px 24px rgb(0 0 0 / 0.07);
}

.appbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.25rem;
	padding-block: 0.75rem;
}

.appbar p {
	font-weight: 600;
}

.appbar .btn {
	padding: 0.55rem 1.15rem;
	font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   19. Waiting room (result preview)
   -------------------------------------------------------------------------- */

.wait {
	display: grid;
	place-items: center;
	text-align: center;
	gap: 1.5rem;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.wait h1 {
	font-size: var(--step-h2);
	max-width: 18ch;
}

.wait__steps {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	color: var(--ink-soft);
}

.wait__steps li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.35;
	transition: opacity var(--mid) linear;
}

.wait__steps li.is-done {
	opacity: 1;
}

.wait__steps li::before {
	content: '';
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: currentColor;
}

.wait__bar {
	width: min(100%, 22rem);
	height: 3px;
	background: var(--rule);
	overflow: hidden;
	border-radius: 2px;
}

.wait__bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ink);
	animation: fill 5.5s linear forwards;
}

@keyframes fill {
	to {
		width: 100%;
	}
}

.ad-slot {
	margin-block: 1.5rem;
	min-height: 1px;
}

/* --------------------------------------------------------------------------
   20. Long-form prose (privacy policy)
   -------------------------------------------------------------------------- */

.longform {
	max-width: var(--measure);
}

.longform h1 {
	font-size: var(--step-h2);
	margin-bottom: 1.5rem;
}

.longform h2 {
	font-size: var(--step-h3);
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}

.longform h3 {
	font-size: var(--step-h4);
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

.longform p,
.longform ul,
.longform ol {
	margin-bottom: 1rem;
	color: var(--ink-soft);
}

.longform li {
	margin-bottom: 0.35rem;
}

.longform a {
	color: var(--ink);
	text-decoration: underline;
}

.longform ul.index {
	columns: 2;
	column-gap: 2rem;
	list-style: none;
	padding: 0;
	font-size: var(--step-small);
}

@media (max-width: 34rem) {
	.longform ul.index {
		columns: 1;
	}
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */

.footer {
	margin-top: auto;
	background: var(--surround);
	border-top: 2px solid var(--ink);
	padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}

.footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: flex-start;
	justify-content: space-between;
}

.footer__note {
	font-size: var(--step-small);
	color: var(--ink-soft);
	max-width: 52ch;
	margin-top: 0.85rem;
}

.footer .brand__name span {
	color: var(--ink-soft);
}

.footer__links {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-size: var(--step-small);
}

.footer__links a {
	text-decoration: none;
	border-bottom: 1px solid var(--rule-firm);
	padding-bottom: 0.15rem;
	transition: border-color var(--fast) linear;
}

.footer__links a:hover {
	border-bottom-color: var(--ink);
}

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.stack-sm > * + * {
	margin-top: 0.75rem;
}

.stack-md > * + * {
	margin-top: 1.5rem;
}

.stack-lg > * + * {
	margin-top: 2.5rem;
}

.hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin-block: clamp(2rem, 1.4rem + 2vw, 3rem);
}

/* --------------------------------------------------------------------------
   23. Motion preferences
   -------------------------------------------------------------------------- */

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

	.field__marker {
		animation: none;
	}

	.wait__bar i {
		width: 100%;
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */

@media print {
	.masthead,
	.footer,
	.appbar,
	.ad-slot {
		display: none;
	}

	body {
		background: #fff;
	}
}

/* --------------------------------------------------------------------------
   25. Centred composition below the hero

   Overrides that pull the page onto one axis. Kept together at the end so the
   rule is legible as a single decision rather than scattered through the file.
   -------------------------------------------------------------------------- */

.sampler__head {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.35rem;
}

.sampler__actions {
	flex-direction: column;
	text-align: center;
}

.sampler__actions .btn {
	flex: none;
	width: min(100%, 26rem);
}

.sampler__note {
	flex: none;
	max-width: 58ch;
}

.method__step {
	text-align: center;
	align-items: center;
}

.method__step h3 {
	justify-content: center;
}

.method__step p {
	max-width: 46ch;
}

.method__fig {
	width: 100%;
}

.tone {
	text-align: center;
}

.tone dl {
	display: inline-block;
	text-align: center;
}

.checks {
	width: min(100%, 58rem);
	margin-inline: auto;
}

.faq {
	width: min(100%, 54rem);
	margin-inline: auto;
}

.readout > div {
	text-align: center;
}

.result__head {
	justify-items: center;
	text-align: center;
}

.result__head .lead {
	margin-inline: auto;
}

.matches,
.neighbours,
.tools {
	width: min(100%, 64rem);
	margin-inline: auto;
}

.compare,
.compare__legend,
.verdict {
	width: min(100%, 54rem);
	margin-inline: auto;
}

.verdict {
	justify-content: center;
	text-align: center;
}

@media (min-width: 50rem) {
	.result__head {
		grid-template-columns: minmax(0, 1fr);
	}
}

.subhead {
	margin-inline: auto;
	text-align: center;
}

.subhead h3 {
	font-size: var(--step-h3);
	max-width: 24ch;
	margin-inline: auto;
}

.subhead p {
	margin: 0.8rem auto 0;
	max-width: 68ch;
	color: var(--ink-soft);
	font-size: var(--step-small);
	line-height: 1.6;
}

.verdict {
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.verdict__text {
	max-width: 44ch;
}

/* A caveat set small still needs a readable line, and 56ch of 14px type is a
   much narrower column than 56ch of lead type. Given its own measure. */
.caveat {
	max-width: 76ch;
	margin: 1.35rem auto 0;
	font-size: var(--step-small);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   26. Catalogue: shade lists, the finder, the depth spread
   -------------------------------------------------------------------------- */

.shades {
	list-style: none;
	padding: 0;
	margin: 1.75rem auto 0;
	width: min(100%, 58rem);
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
	text-align: left;
	counter-reset: shade;
}

.shade {
	background: var(--panel);
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.2rem 1rem;
	padding: 0.85rem 1.1rem;
}

.shade__chip {
	aspect-ratio: 1;
	grid-row: span 2;
}

.shade__name {
	min-width: 0;
}

.shade__name p {
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.shade__name a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--rule-firm);
}

.shade__name a:hover {
	border-bottom-color: var(--ink);
}

.shade__name em {
	font-style: normal;
	font-family: var(--mono);
	font-size: 0.78em;
	letter-spacing: -0.02em;
	background: var(--panel-sunk);
	border-radius: 2px;
	padding: 0.15em 0.4em;
	white-space: nowrap;
}

.shade__delta {
	grid-row: span 2;
	text-align: right;
	font-size: var(--step-small);
	color: var(--ink-soft);
	line-height: 1.35;
}

.shade__delta .num {
	display: block;
	color: var(--ink);
	font-size: 0.95rem;
}

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

	.shade__delta {
		grid-row: auto;
		grid-column: 2;
		text-align: left;
		display: flex;
		gap: 0.6rem;
		align-items: baseline;
	}

	.shade__delta .num {
		display: inline;
	}
}

/* The finder */
.hero--tool {
	padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
	text-align: center;
}

.hero--tool h1 {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
	letter-spacing: -0.033em;
	max-width: 20ch;
	margin-inline: auto;
}

.hero--tool .hero__sub {
	margin-inline: auto;
	max-width: 60ch;
}

.finder {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	width: min(100%, 40rem);
	margin: 2rem auto 0;
}

.finder__input {
	flex: 1 1 16rem;
	padding: 0.82rem 1rem;
	background: var(--panel);
	color: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--radius);
	font-size: 1.05rem;
}

.finder__input::placeholder {
	color: var(--ink-soft);
}

.finder .btn {
	flex: 0 0 auto;
}

.finder__hint {
	margin-top: 1rem;
	font-size: var(--step-small);
	color: var(--ink-soft);
	text-align: center;
}

.crumb {
	font-size: var(--step-small);
	color: var(--ink-soft);
	margin-bottom: 1rem;
	text-align: center;
}

.result__swatch {
	width: clamp(7rem, 5rem + 9vw, 11rem);
	aspect-ratio: 1;
}

.result__head h1 em {
	font-style: normal;
	font-family: var(--mono);
	font-size: 0.6em;
	letter-spacing: -0.03em;
	vertical-align: 0.15em;
}

.brands {
	list-style: none;
	padding: 0;
	margin-top: 1.75rem;
	columns: 4 12rem;
	column-gap: 2rem;
	font-size: var(--step-small);
	text-align: left;
}

.brands li {
	break-inside: avoid;
	padding-block: 0.28rem;
}

.brands a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.brands a:hover {
	border-bottom-color: var(--ink);
}

.note--light {
	color: var(--ink-soft);
}

/* The depth spread: how many shades exist at each depth */
.spread {
	display: flex;
	align-items: flex-end;
	gap: clamp(2px, 0.5vw, 6px);
	height: clamp(7rem, 5rem + 6vw, 11rem);
	margin-top: 2.25rem;
}

.spread__bar {
	flex: 1;
	background: var(--c);
	border-radius: 2px 2px 0 0;
	min-height: 3px;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.spread__axis {
	display: flex;
	justify-content: space-between;
	margin-top: 0.7rem;
	color: var(--ink-soft);
}

.spread-figure {
	margin: 0;
}

/* --------------------------------------------------------------------------
   27. Motion

   Four moves, each one about the thing it moves rather than a house fade
   applied to every section. All of them start from the finished state in CSS
   and are armed by JavaScript, so a blocked script or a reduced-motion setting
   leaves the page complete rather than blank.
   -------------------------------------------------------------------------- */

/* 1. The field assembles. 352 chips arriving in a diagonal wave, which is what
      a colour atlas being laid out actually looks like. Capped at well under a
      second end to end so it never delays the page. */
.field__grid.is-armed .field__chip {
	opacity: 0;
	scale: 0.4;
}

.field__grid.is-live .field__chip {
	opacity: 1;
	scale: 1;
	transition: opacity 380ms var(--out) var(--d, 0ms),
		scale 460ms var(--out) var(--d, 0ms);
}

/* 2. The chart grows from its baseline, the way a chart should. */
.spread__bar {
	transform-origin: 50% 100%;
}

.spread.is-armed .spread__bar {
	scale: 1 0.02;
}

.spread.is-live .spread__bar {
	scale: 1 1;
	transition: scale 720ms var(--out) var(--d, 0ms);
}

/* 3. The comparison closes. Your skin and the matched shade slide in from
      opposite sides and meet, so the seam between them is the last thing to
      happen and the thing you are left looking at. */
.compare.is-armed > :first-child {
	translate: -101% 0;
}

.compare.is-armed > :last-child {
	translate: 101% 0;
}

.compare.is-live > * {
	translate: 0 0;
	transition: translate 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.verdict.is-armed {
	opacity: 0;
	translate: 0 0.5rem;
}

.verdict.is-live {
	opacity: 1;
	translate: 0 0;
	transition: opacity 500ms linear 620ms, translate 600ms var(--out) 620ms;
}

/* 4. Rows lift a hair under the pointer. */
.shade,
.neighbour {
	transition: background var(--fast) linear;
}

.shade:hover,
a.neighbour:hover {
	background: var(--signal-wash);
}

.chip {
	transition: box-shadow var(--fast) linear;
}

@media (prefers-reduced-motion: reduce) {
	.field__grid.is-armed .field__chip,
	.spread.is-armed .spread__bar,
	.compare.is-armed > *,
	.verdict.is-armed {
		opacity: 1;
		scale: 1;
		translate: 0 0;
	}
}