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

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

ul[role=list],
ol[role=list]
{
	list-style: none
}

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

body
{
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5
}

a:not([class])
{
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto
}

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

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

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

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

:root
{
	--fluid-min-width: 320;
	--fluid-max-width: 1280;
	--fluid-screen: 100vw;
	--fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)))
}

@media screen and (min-width:1280px)
{
	:root
	{
		--fluid-screen: calc(var(--fluid-max-width) * 1px)
	}
}

:root
{
	--f--2-min: 11.11;
	--f--2-max: 13.44;
	--step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp));
	--f--1-min: 13.33;
	--f--1-max: 16.80;
	--step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp));
	--f-0-min: 16.00;
	--f-0-max: 21.00;
	--step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));
	--f-1-min: 19.20;
	--f-1-max: 26.25;
	--step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));
	--f-2-min: 23.04;
	--f-2-max: 32.81;
	--step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));
	--f-3-min: 27.65;
	--f-3-max: 41.02;
	--step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));
	--f-4-min: 33.18;
	--f-4-max: 51.27;
	--step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
	--f-5-min: 39.81;
	--f-5-max: 64.09;
	--step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp))
}

:root
{
	--red-0: #b70000;
	--gold-0: #b79200;
	--green-0: #00b700;
	--blue-0: #0000b7;
	--white: #ffffff;
	--black: #000000
}

:root
{
	--red-50: #faeeee;
	--red-100: #f5dddd;
	--red-200: #ecbbbb;
	--red-300: #e29898;
	--red-400: #d87373;
	--red-500: #cc4b4b;
	--red-600: #bc1313;
	--red-700: #930000;
	--red-800: #690000;
	--red-900: #410000
}

:root
{
	--gold-50: #f6f1de;
	--gold-100: #ece3bd;
	--gold-200: #d9c67a;
	--gold-300: #c6a936;
	--gold-400: #b08c00;
	--gold-500: #917400;
	--gold-600: #735c00;
	--gold-700: #564500;
	--gold-800: #3b2f00;
	--gold-900: #221b00
}

:root
{
	--green-50: #e1f6e1;
	--green-100: #c2eec2;
	--green-200: #7fdb7f;
	--green-300: #31c531;
	--green-400: #00a800;
	--green-500: #008b00;
	--green-600: #006e00;
	--green-700: #005300;
	--green-800: #003a00;
	--green-900: #002200
}

:root
{
	--blue-50: #fofofb;
	--blue-100: #e1e1f6;
	--blue-200: #c3c3ee;
	--blue-300: #a5a5e6;
	--blue-400: #8888dd;
	--blue-500: #6b6bd5;
	--blue-600: #4d4dcd;
	--blue-700: #2b2bc3;
	--blue-800: #0000ac;
	--blue-900: #00006e
}

:root
{
	--white-50: #f1f1f1;
	--white-100: #e2e2e2;
	--white-200: #c6c6c6;
	--white-300: #ababab;
	--white-400: #919191;
	--white-500: #777777;
	--white-600: #5e5e5e;
	--white-700: #474747;
	--white-800: #303030;
	--white-900: #1b1b1b
}

:root
{
	font: var(--step-0)/1.4 "orkneylight", sans-serif
}

body
{
	min-width: 20rem;
	max-width: 90rem;
	background: 10% url(../images/just-snow.svg), var(--red-800);
	color: var(--black)
}

main,
footer
{
	margin-top: auto;
	padding: var(--step--2) var(--step-5)
}

footer
{
	display: flex;
	flex-wrap: none;
	justify-content: space-between;
	align-items: center;
	font-size: var(--step--2)
}

:is(h1, h2, h3, h4)
{
	font-weight: 700;
	font-variant: small-caps
}

p
{
	font-family: "orkneylight", sans-serif;
	font-weight: 400
}

img
{
	width: 100%;
	display: block
}

h1
{
	font-size: var(--step-3)
}

h2
{
	font-size: var(--step-2)
}

h3
{
	font-size: var(--step-1)
}

h4
{
	font-size: var(--step-0)
}

.flow>*+*
{
	margin-top: var(--step-0), 1rem
}

.full-bleed
{
	width: 100vw;
	margin-left: calc(50% - 50vw)
}

.handwriting
{
	font-family: "Architects Daughter", cursive
}

[class$=-wrapper]
{
	box-sizing: content-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center
}

.outer-wrapper
{
	background-color: var(--green-800);
	border: double var(--gold-400) .5rem;
	min-height: calc(100vh - var(--step-0))
}

.inner-wrapper
{
	background-color: var(--gold-50);
	justify-content: unset;
	align-items: unset;
	min-height: calc(100vh - var(--step-5));
	width: calc(100% - var(--step-1));
	border: solid var(--gold-400) .1rem
}

.banner
{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	padding: var(--step-1);
	text-align: center
}

.flex-wrap
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--step-5);
	flex-wrap: wrap
}

.photo
{
	flex-basis: calc((40rem - 100%)*999);
	flex-grow: 1
}

.copy
{
	flex-basis: calc((40rem - 100%)*999);
	flex-grow: 2
}

.copy>*+*
{
	margin-top: var(--step--2)
}

.photo>img
{
	height: 25rem;
	-o-object-position: 55% 33%;
	object-position: 55% 33%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: var(--step--2);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, .5)
}

.sig
{
	text-align: center;
	padding: 0;
	margin-top: var(--step-1);
	transform: rotate(-2.5deg)
}

.job-title
{
	font-style: italic;
	text-align: center;
	margin-top: 0;
	font-size: 70%
}

@media screen and (min-width:450px)
{
	[class$=-wrapper]
	{
		border-radius: var(--step--2);
		width: calc(100% - var(--step-5));
		margin: var(--step-0)
	}

	.outer-wrapper
	{
		min-height: calc(100vh - var(--step-5))
	}

	.inner-wrapper
	{
		border: solid var(--gold-400) .25rem;
		min-height: calc(100vh - var(--step-5) - var(--step-5))
	}
}