@font-face
{
  font-family: 'belanosima';
  src: url('/fonts/belanosima-regular.woff2') format('woff2'),
  url('/fonts/belanosima-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'belanosima';
  src: url('/fonts/belanosima-semibold.woff2') format('woff2'),
  url('/fonts/belanosima-semibold.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'librebaskerville';
  src: url('/fonts/librebaskerville-regular.woff2') format('woff2'),
  url('/fonts/librebaskerville-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'librebaskerville';
  src: url('/fonts/librebaskerville-italic.woff2') format('woff2'),
  url('/fonts/librebaskerville-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'librebaskerville';
  src: url('/fonts/librebaskerville-bold.woff2') format('woff2'),
  url('/fonts/librebaskerville-bold.woff') format('woff');
  font-weight: 600;
  font-style: regular;
  font-display: fallback;
}

:root
{
	--black: #000;
	--charcoal: #16161d;
	--darkgray: #444;

	--middlegray: #888;

	--lightgray: #cccaea;
	--bone: #fffaea;
	--white: #fff;


	--bg-strong: var(--white);
	--bg: var(--bone);
	--bg-subtle: var(--lightgray);

	--middle-gray: var(--middlegray);

	--text-subtle: var(--darkgray);
	--text: var(--charcoal);
	--text-strong: var(--black);
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--text-strong: var(--white);
		--text: var(--bone);
		--text-subtle: var(--lightgray);

		--middle-gray: var(--middlegray);

		--bg-subtle: var(--darkgray);
		--bg: var(--charcoal);
		--bg-strong: var(--black);
	}
}


html
{
	font-size: 1vw;
	line-height: 1.5;
	padding: 0;
	margin: 0;
}

body { font-size: 4.8rem; }
@media (min-width: 480px) { body { font-size: 3.6rem; }}
@media (min-width: 540px) { body { font-size: 3.2rem; }}
@media (min-width: 640px) { body { font-size: 2.8rem; }}
@media (min-width: 720px) { body { font-size: 2.4rem; }}
@media (min-width: 860px) { body { font-size: 2.2rem; }}
@media (min-width: 960px) { body { font-size: 1.8rem; }}
@media (min-width: 1000px) { body { font-size: 1.6rem; }}
@media (min-width: 1000px) { html { font-size: 10px; }}

body
{
	color: var(--text);
	background-color: var(--bg);
	border: 0.125rem solid var(--text);
	border-top: 0;
	border-bottom: 0;

	display: flex;
	flex-flow: row wrap;
	align-items: start;
	align-content: start;
	justify-content: start;
	min-height: 80vh;
	font-family: belanosima;
	font-family: librebaskerville;

	margin: 0 auto;
	padding: 0 4rem;
	max-width: 96rem;
}

.header
{
	flex: 1 1 100%;
	margin: 0;
	padding: 2rem;
	display: flex;
	justify-content: start;
	align-items: start;
	border-bottom: 0.25rem solid;
}

h1
{
	width: 100%;
	height: 1.6em;
	color: transparent;
	background-color: var(--text);

	margin: 0;

	mask-position: 0 50%;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-image: url("/img/sellwood_telephone-stacked-lowercase.svg?nocache-2025-09-15");
}

h2,
h3
{
	font-weight: 600;
}

p
{
	margin: 0.5em 0;
}

a
{
	color: inherit;
}

header p
{
	margin: 0 auto;
	text-align: center;
}

.section
{
	padding: 1em 0;
	margin: 1em 0;
	border: 0.25rem solid;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

footer
{
	margin: 1em 0;
}

ul,
ol
{
	padding-left: 1.75ch;
}

.navbar
{

	flex: 0 0 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row;
	border-bottom: 0.25rem solid var(--text);
	gap: 0.25rem;
}

.navbar .list
{
	display: contents;
}

.navbar .list .list-item
{
	font-family: belanosima;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--bg-strong);
	color: var(--text);
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: .125em .5em;
	font-weight: 400;
}

.content
{
	flex: 1 1 100%;
	margin: 0;
	padding: 0 2rem;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	border-bottom: 0.25rem solid;
}

.get-started
{
	margin: 1em auto;
	padding: 0.25em 1em;
	border-radius: .5em;
	background: var(--bg-strong);
	color: var(--text-strong);
	border: .25rem solid;
	text-align: center;
	position: relative;
	font-weight: 600;
}

.get-started a::after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}