@layer tokens, base, elements, patterns, utils;

/* Tokens */

@layer tokens{
:root {
	--color-default: hsl(60deg 4% 11%);

	--color-brand: hsl(43deg 62% 41%);

	--color-gray-light: hsl(0deg 0% 96%);
	--color-gray-medium: hsl(0deg 0% 54%);
}
}

@layer tokens{
:root {
	--space-container-inline: clamp(1rem, 4.2vw, 3rem);
	--space-content-block: clamp(4rem, 12vw, 8rem);
}
}

@layer tokens{
:root {
	--typo-default-font-family: "Work Sans", sans-serif;
	--typo-accent-font-family: "Arrus BT", serif;
}
}

/* Base */

@layer base{

/*!
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: Arrus BT Std Roman by Bitstream
 * URL: https://www.myfonts.com/products/bitstream-arrus-arrus-434014
 * Copyright: Copyright © 2023 Monotype Imaging Inc. All rights reserved.
 *
 * © 2023 MyFonts Inc. */

@font-face {
	font-display: swap;
	font-family: "Arrus BT";
	src: url("../fonts/ccab5da3.woff2") format("woff2"),
		url("../fonts/4dab6382.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-family: "Work Sans";
	src: url("../fonts/43db2395.woff2") format("woff2"),
		url("../fonts/874efe42.woff") format("woff");
}
}

@layer base{

* {
	box-sizing: border-box;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

body {
	color: var(--color-default);
	font-family: var(--typo-default-font-family);
	line-height: 1.5;
}

img {
	block-size: auto;
	max-inline-size: 100%;
	vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1rem;
}

address {
	font-style: normal;
}
}

/* Elements */

@layer elements{

.RichText > * + * {
	margin-block-start: 1em;
}

.RichText :is(h1, h2, em) {
	font-family: var(--typo-accent-font-family);
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.RichText h1 {
	font-size: 1.25em;
}

.RichText a {
	color: var(--color-brand);
}

@container container (50rem <= inline-size) {
	.RichText {
		font-size: 1.25rem;
	}
}
}

/* Patterns */

@layer patterns{

.Figure {
	display: grid;
	grid-template-areas: "image";
	row-gap: calc(var(--space-content-block) / 2);
}

.Figure-overlay,
.Figure-image {
	grid-area: image;
}

.Figure-overlay {
	font-family: var(--typo-accent-font-family);
	line-height: 1.8;
	padding-block: calc(var(--space-container-inline) * 2);
	padding-inline: var(--space-container-inline);
	text-align: center;
	text-wrap: balance;
	z-index: 1;
}

.Figure-overlay > * + * {
	margin-block-start: 0.5em;
}

.Figure-image img {
	block-size: 100%;
	object-fit: cover;
}

@container container (34rem <= inline-size < 50rem) {
	.Figure-overlay {
		font-size: 1.25rem;
	}
}

@container container (50rem <= inline-size) {
	.Figure-overlay {
		font-size: 1.75rem;
	}
}
}

@layer patterns{

.FooterNav-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	row-gap: 0.125rem;
}

.FooterNav-link {
	color: var(--color-default);
	display: block;
	padding-block: 0.25rem;
	text-decoration: none;
}

.FooterNav-link[aria-current] {
	color: var(--color-brand);
}

.FooterNav-link:hover {
	text-decoration: underline;
}
}

@layer patterns{

.FooterService-list {
	list-style: none;
}

.FooterService-link {
	color: var(--color-gray-medium);
	text-decoration: none;
}

.FooterService-link:hover {
	text-decoration: underline;
}
}

@layer patterns{

.Footer {
	--section-spacing: 2.5rem;

	background: var(--color-gray-light);
	padding-block: calc(var(--space-content-block) / 2);
}

.Footer-container {
	display: flex;
	flex-direction: column;
	row-gap: var(--section-spacing);
}

.Footer-nav {
	column-gap: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: var(--section-spacing);
}

.Footer-logo {
	max-inline-size: 30%;
	min-inline-size: 10rem;
}

.Footer-info {
	--paragraph-spacing: 1.25rem;

	align-items: end;
	column-gap: 8%;
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--paragraph-spacing);
}

.Footer-info p + p {
	margin-block-start: var(--paragraph-spacing);
}

.Footer-info a {
	color: currentcolor;
	text-decoration: none;
}

.Footer-info a:hover {
	text-decoration: underline;
}
}

@layer patterns{

.HeaderNav-list {
	column-gap: 1.25rem;
	display: flex;
	list-style: none;
	row-gap: 0.125rem;
}

.HeaderNav-link {
	color: var(--color-default);
	display: block;
	padding-block: 0.25rem;
	text-decoration: none;
}

.HeaderNav-link[aria-current] {
	color: var(--color-brand);
}

.HeaderNav-link:hover {
	text-decoration: underline;
}

@container container (inline-size < 50rem) {
	.HeaderNav-list {
		align-items: end;
		flex-direction: column;
	}
}

@container container (50rem <= inline-size) {
	.HeaderNav {
		font-size: 1.25rem;
	}
}
}

@layer patterns{

.Header {
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	margin-block-start: calc(var(--space-content-block) / 2);
}

.Header-logo {
	max-inline-size: 50%;
}
}

/* Utilities */

@layer utils{
.u-container {
	box-sizing: content-box;
	container-name: container;
	container-type: inline-size;
	inline-size: calc(100% - var(--space-container-inline) * 2);
	margin-inline: auto;
	max-inline-size: 80rem;
	padding-inline: var(--space-container-inline);
}
}

@layer utils{
.u-content {
	display: flex;
	flex-direction: column;
	margin-block: var(--space-content-block);
	row-gap: var(--space-content-block);
}
}

@layer utils{
.u-text-container {
	margin-inline: auto;
	max-inline-size: 75ch;
}
}

/*# sourceMappingURL=main.css.map */