/* ===========================
   GLOBAL UI — NAV + BRAND
   =========================== */
/* ===========================
   GLOBAL TYPOGRAPHY
   =========================== */

:root
{
	--header-font: "Tinos", serif;
	--body-font: "Carlito",
		sans-serif;

	--paragraph-text-size: 1.4rem;
	--small-text-size: 1.2rem;

	--h1-text-size: 3.2rem;
	--h2-text-size: 2.4rem;
	--h3-text-size: 1.9rem;
	--h4-text-size: 1.6rem;
	--h5-text-size: 1.35rem;
	--h6-text-size: 1.2rem;

	--button-text-size: 1.35rem;
	--link-text-size: 1.25rem;

	--line-height-body: 1.65;
	--line-height-heading: 1.3;

	--milk-white: rgba(254, 252, 255, 1);
	--night: rgba(12, 9, 10, 1);

}

.tinos-regular
{
	font-family: "Tinos", serif;
	font-weight: 400;
	font-style: normal;
}

.tinos-bold
{
	font-family: "Tinos", serif;
	font-weight: 700;
	font-style: normal;
}

.tinos-regular-italic
{
	font-family: "Tinos", serif;
	font-weight: 400;
	font-style: italic;
}

.tinos-bold-italic
{
	font-family: "Tinos", serif;
	font-weight: 700;
	font-style: italic;
}

.carlito-regular
{
	font-family: "Carlito", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.carlito-bold
{
	font-family: "Carlito", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.carlito-regular-italic
{
	font-family: "Carlito", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.carlito-bold-italic
{
	font-family: "Carlito", sans-serif;
	font-weight: 700;
	font-style: italic;
}



html
{
	font-size: 16px;
	max-width: 100%;
	overflow-x: hidden;
}

img,
svg
{
	max-width: 100%;
	height: auto;
}

body
{
	font-family: var(--body-font);
	font-size: var(--paragraph-text-size);
	color: var(--night);
	line-height: var(--line-height-body);
	margin: 0;
	padding: 0;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	font-family: var(--header-font);
	line-height: var(--line-height-heading);
	margin: 0;
	font-weight: 500;
}

h1
{
	font-size: var(--h1-text-size);
}

h2
{
	font-size: var(--h2-text-size);
}

h3
{
	font-size: var(--h3-text-size);
}

h4
{
	font-size: var(--h4-text-size);
}

h5
{
	font-size: var(--h5-text-size);
}

h6
{
	font-size: var(--h6-text-size);
}

p
{
	margin: 0;
	font-size: var(--paragraph-text-size);
}

/* -------- Base styles (all sizes) -------- */

.brand-title
{
	align-self: center;
}

.sidenav
{
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
}


.sidenav a
{
	display: block;
	text-decoration: none;
}



/* Close button — base */
.close-btn
{
	background:
		radial-gradient(1200px 700px at 20% 10%, rgba(255, 255, 255, 0.10), transparent 55%),
		radial-gradient(900px 600px at 85% 30%, rgba(80, 200, 255, 0.12), transparent 55%),
		rgba(12, 14, 18, 0.92);
	color: rgba(254, 252, 255, 1);

	width: 28px;
	height: 28px;
	border-radius: 50%;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;

	margin-top: auto;
	margin-bottom: 1.5rem;
	align-self: center;

	z-index: 1001;
}

.close-btn:hover,
.close-btn:focus-visible
{
	background: rgba(102, 0, 0, 1);
}

.close-btn:focus-visible
{
	outline: 2px solid #fff;
	outline-offset: 2px;
}


.btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-family: var(--body-font);
	font-size: var(--button-text-size);
	font-weight: 600;

	text-decoration: none;
	color: #f9fafb;

	background: radial-gradient(circle at 30% 0%, #22c55e, #16a34a);
	border-radius: 999px;
	height: 48px;
	max-width: 130px;

	box-shadow: 0 0 14px rgba(34, 197, 94, 0.45);
}

.btn:visited
{
	color: #f9fafb;
}

/* Reusable logo pattern */
.logo-container
{
	width: 100%;
	margin-inline: auto;
}

.newlogo
{
	width: 100%;
	height: auto;
	display: block;
}