@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&family=Spectral:ital,wght@0,400;0,700;1,400&display=swap');


:root {
	/* typography */
	--serif: 'Spectral', serif;
	--cursive: 'Lavishly Yours', cursive;

	/* font size tokens */
	--fs-sm: .8rem;
	--fs-md: 1rem;
	--fs-lg: 1.4rem;

	/* line height tokens */
	--lh-sm: 1.2;
	--lh-md: 1.4;
	--lh-lg: 1.8;

	/* body font weight tokens */
	--fw-rg: 400;
	--fw-md: 600;

	/* colors */
	--bg: #fffcf7;
	--text: #202122;
}

* {
	margin: 0;
	padding: 0;

	color: var(--text);
}

body {
	font-family: var(--serif);

	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	background-color: var(--bg);
	margin: 48px 24px;
}

header, main, footer {
	width: 100%;
}

header {
	margin-bottom: 96px;
}

article {
	margin-bottom: 96px;
}

h1 {
	font-size: var(--fs-lg);
	font-weight: var(--fw-md);
}

p.subhead {
	font-family: var(--cursive);
	font-size: var(--fs-lg);
}

h2 {
	font-size: var(--fs-sm);
	font-weight: var(--fw-md);
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 24px;
	opacity: 60%;
}

article p {
	margin-bottom: 16px;
	text-align: justify;
	font-weight: var(--fw-rg);
	font-size: var(--fs-md);
	line-height: var(--lh-lg);
}

section p:first-child {
	text-indent: 2em;
}

sup {
	font-size: calc(0.4em + 5px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2.5 * (1em - 5px));

  color: var(--text);
  opacity: 60%;
}

.footnote::before {
	content: "";
	display: block;
	margin: 48px 0 16px -16px;
	width: 40px;
	height: 1px;
	background-color: var(--text);
}

.footnote {
	padding-left: 16px;
	font-size: var(--fs-sm);
}

.footnote a {
	position: relative;
	top: 2px;
	left: 8px;
	font-size: var(--fs-sm);
	opacity: 60%;
}

.footnote li p {
	font-size: var(--fs-sm);
	line-height: var(--lh-md);
	text-indent: 0;
}

footer {
	font-size: var(--fs-sm);
	font-style: italic;
	opacity: 60%;
}

hr {
  margin: 3.75em auto;
  width: 40px;
  height: auto;
  background: none;
  border-color: var(--text);
  opacity: 15%;
  text-align: center;
  position: relative;
}

@media only screen and (min-width: 640px) {
	header, main, footer {
		width: 90%;
		margin: 48px;
	}
}

@media only screen and (min-width: 768px) {
	header, main, footer {
		width: 560px;
	}
}