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

:root {
	--color-dark: #000000;
	--color-light: #dcdcdf;
	--color-grey: #58585F;
	--size-step-0: 0.83em;
	--size-step-1: 1em;
	--size-step-2: 1.2em;
	--size-step-3: 1.44em;
	--size-step-4: 1.73em;
	--size-step-5: 2.07em;
	--size-step-6: 2.49em;
	--size-step-7: 2.99em;
	--base-spacing: 1.78125rem;
	--space-step-0: calc(var(--base-spacing)*0.25);
	--space-step-1: calc(var(--base-spacing)*0.5);
	--space-step-2: var(--base-spacing);
	--space-step-3: calc(var(--base-spacing)*1.5);
	--space-step-4: calc(var(--base-spacing)*2);
	--space-step-5: calc(var(--base-spacing)*3);
	--space-step-6: calc(var(--base-spacing)*3.5);
	--space-flexible-large: clamp(2.67rem, -6.823rem + 23.733vw, 6.23rem);			/* 880 to 640, step 6 to 3 */
	--flow-space: var(--base-spacing);
}

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	overscroll-behavior: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

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

:target {
  scroll-margin-block: 5ex;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}
	
body {
	position: relative;
	min-height: 100vh;
	line-height: 1.5;
	font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
	font-size: 1.1875rem;
	color: #121212;
}

h1, h2, h3, h4 {
	text-wrap: balance;
	line-height: calc(0.2rem + 2ex + 0.2rem);
}

h1 {
	font-size: clamp(2.46rem, -0.104rem + 7.596vw, 3.55rem);
}

h2, h3, h4 {
	color: var(--color-grey);
}

ul,
ol {
  padding-inline-start: 1em;
}

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

.flow > * + * {
  margin-block-start: var(--flow-space);
}

* + :is(h1, h2) {
  --flow-space: var(--space-step-4);
}

* + :is(h3, blockquote) {
	--flow-space: var(--space-step-2);
}

:is(h1, h2, h3) + * {
  --flow-space: var(--space-step-0);
}

.flow li + li {
	margin-block-start: var(--space-step-1);
}



/* Scroll animation */

.container {
	background-color: rgba(14,4,58,1);
	padding: var(--space-step-4) var(--space-step-2);
}

@keyframes change-background {
	from { background-color: rgba(14,4,58,1); }
	to { background-color: rgba(0,0,50,0.4); }
}

@supports (animation-range: 200px 75%) {	
	body:before {
		content:'';
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100%;
		z-index: -1;
		background: linear-gradient(to top, orange, #dbf0f9 60%);
	}

	.container {
		animation: change-background linear both;
		animation-range: 200px 75%;
		animation-timeline: scroll( root block );
	}
}



/* Layout */

header {
	max-width: 880px;
  	margin-inline: auto;	
	color: var(--color-light);
	display: flex;
	align-items: center;
	gap: var(--space-step-1);
}

.graphic {
	flex-basis: 33%;
}

.site-title {
	flex-basis: 67%;
}

.subtitle {
	margin-block-start: var(--space-step-0);
	font-size: var(--size-step-2);
}

main {
	min-height: 100vh;
	max-width: 1024px;
	margin: var(--space-step-3) auto;
	padding: var(--space-flexible-large) var(--space-step-2);
	background-color: var(--color-light);
}

.page-intro {
	margin-inline: auto;
	max-width: 720px;
	font-size: var(--size-step-2);
}
  
.page-content {
	margin-top: var(--space-step-4);
  	margin-inline: auto;
  	max-width: 600px;
}

.page-footer {
	margin-top: var(--space-step-4);
	margin-inline: auto;
	max-width: 720px;
	text-align: right;
}

@media ( max-width: 769px ) {
	
	.subtitle {
		font-size: var(--size-step-1);
	}
}

@media ( max-width: 640px ) {

	.container {
		padding: var(--space-step-2);	
	}	
		
	header {
		flex-direction: column;
	}

	.site-title > * {
		text-align: center;
	}

	.graphic {
		width: 66%;
	}
}