@font-face {
  font-family: 'CabinetGrotesk-Variable';
  src: url('../fonts/CabinetGrotesk-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
	--font-sans: 'CabinetGrotesk-Variable', system-ui, sans-serif;
	--font-serif: Georgia, serif;
	--font-mono: Menlo, Consolas, monospace;
}

/*
[data-type-scale='minor-second']     { --scale-ratio: 1.067; }
[data-type-scale='major-second']     { --scale-ratio: 1.125; }
[data-type-scale='minor-third']      { --scale-ratio: 1.2; }
[data-type-scale='major-third']      { --scale-ratio: 1.25; }
[data-type-scale='perfect-fourth']   { --scale-ratio: 1.333; }
[data-type-scale='augmented-fourth'] { --scale-ratio: 1.414; }
[data-type-scale='perfect-fifth']    { --scale-ratio: 1.5; }
[data-type-scale='golden-ratio']     { --scale-ratio: 1.618; }
[data-type-scale='major-sixth']      { --scale-ratio: 1.667; }
[data-type-scale='minor-seventh']    { --scale-ratio: 1.778; }
[data-type-scale='major-seventh']    { --scale-ratio: 1.875; }
[data-type-scale='octave']           { --scale-ratio: 2; }
*/

:root {
	--type-anchor: 1.15rem;
	--scale-ratio: 1.25; /* major-third default */

	--step-down-2: calc(var(--step-down-1) / var(--scale-ratio));
	--step-down-1: calc(var(--step-0) / var(--scale-ratio));
	--step-0: var(--type-anchor);
	--step-up-1: calc(var(--step-0) * var(--scale-ratio));
	--step-up-2: calc(var(--step-up-1) * var(--scale-ratio));
	--step-up-3: calc(var(--step-up-2) * var(--scale-ratio));
	--step-up-4: calc(var(--step-up-3) * var(--scale-ratio));
	--step-up-5: calc(var(--step-up-4) * var(--scale-ratio));
}


body {
	font-family: var(--font-sans);
	font-size: var(--step-0);
}

h1, h2, h3, h4 {
	text-wrap: pretty;
	text-wrap: balance;

	transform: translateX(-0.07em);
}

p {
	text-wrap: pretty;
}


.quiet-voice {
	font-family: var(--font-sans);
	font-size: var(--step-down-1);
	line-height: 1.4;
}

.calm-voice,
p {
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.35;
	font-weight: var(--calm-voice-weight);
	max-width: 75ch;

	em {
		font-style: italic;
	}

	strong, &.strong {
		font-weight: 550;
	}
}

.strong-voice, :where(article.styled, text-content) h3 {
	font-family: var(--font-sans);
	font-size: var(--step-up-2);
	font-weight: 400;
	line-height: 1.3;
	max-width: 60ch;
}

.attention-voice, :where(article.styled, text-content) h2 {
	font-family: var(--font-sans);
	font-size: var(--step-up-3);
	font-weight: 430;
	line-height: 1.15;
	max-width: 40ch;
	@media (width < 500px) {
		font-size: var(--step-up-2);
		line-height: 1.1;
		font-weight: 450;
	}
}

.loud-voice, :where(article.styled, text-content) h1 {
	font-family: var(--font-sans);
	font-size: var(--step-up-5);
	font-weight: 700;
	line-height: 1.2;
	max-width: 40ch;
}

:where(article.styled, text-content) {
	p + p {
		margin-top: 1em;
	}

	h2 + p, 
	h3 + p { 
		margin-top: 1em;
	}

	p + h2, 
	p + h3 {
		margin-top: 1.3em;
	}

	h2 + h3 {
		margin-top: 1em;
	}

	h1 + h2 {
		margin-top: 1em;
	}

	ul, ol {
		padding-left: 1em;
	}
}