:root {
	--red: #ba1c21;
	--red-over: #ba1c21;
	--red-rgba: rgba(186, 28, 33, 1);
	--red-light: #f54147;
	--light-red: #f54147;
	--red-pale: #ffe1e2;
	--light-red-rgba: rgba(245, 65, 71, 1);
	--blue: #003058;
	--blue-over: #0e3f68;
	--blue-rgba: rgba(0, 48, 88, 1);
	--blue-dark: #001526;
	--blue-dark-over: #071d30;
	--blue-dark-rgba: rgba(0, 21, 38, 1);
	--blue-light: #0057a0;
	--light-blue: #0057a0;
	--light-blue-over: #0057a0;
	--light-blue-rgba: rgba(0, 87, 160, 1);
	--label: #585858;
	--light-label: #868686;
	--dark-gray: #939393;
	--darker-gray: #282828;
	--rgb-dark-gray: rgba(147, 147, 147, 1);
	--gray: #b9b9b9;
	--light-gray: #d2d2d2;
	--gold: #ff9600;
	--light-gold: #ffc257;
	--gold-light: #ffc257;
	--gold-pale: #ffe5b2;
	--dark-gold: #c17200;
	--amber: #f59e0b;
	--green: #37c198;
	--green-over: #37c198;
	--green-rgba: rgba(55, 193, 152, 1);
	--light-green: #2bd8a5;
	--light-green-over: #2bd8a5;
	--light-green-rgba: rgba(43, 216, 165, 1);
	--dark-green: #068962;
	--dark-green-over: #068962;
	--dark-green-rgba: rgba(6, 137, 98, 1);
	--white: #ffffff;
	--card: #ffffff;
	--muted: #6b7280;
	--brand: #ba1c21;
	--border: #e5e7eb;
	--ut-brand: #ba1c21;
	--ink-900: #0f172a;
	--ink-700: #334155;
	--ink-500: #64748b;
	--ink-300: #cbd5e1;
	--ink-200: #e2e8f0;
	--ink-100: #f1f5f9;
	--bg: #ffffff;
	--ring: #2563eb;
	--success: #16a34a;
	--danger: #dc2626;
	--text: #717274;
	--sub: #9ca3af;
	--card-bg: #ffffff;
	--praise-border: #d0d7e2;
	--event-border: #d0d7e2;
	--light-bg: #f5f7fb;
	--text-main: #1f2933;
	--text-muted: #6b7280;
	--accent-red: #e31c3d;
	--shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.12);
	--border-radius-lg: 16px;
	--border-radius-xl: 24px;
	--panel: #f4f4f4;
	--chip: #0b1220;
	--focus-cyan: #00bcd4;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/css/fonts/Montserrat-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("/css/fonts/Montserrat-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DMSerif";
	src: url("/css/fonts/DMSerifText-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PTSerif";
	src: url("/css/fonts/PTSerif-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("/css/fonts/Montserrat-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("/css/fonts/Montserrat-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bison-Bold";
	src: url("/css/fonts/Montserrat-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Altivo";
	src: url("/css/fonts/Montserrat-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	background: #090c0d;
	color: #f2eadb;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
main {
	margin: 0 !important;
	overflow-x: hidden;
}

main {
	padding: 0 !important;
}

html,
body,
input,
select,
textarea,
label,
button {
	font-family: "Montserrat", "Source Sans Pro", "Myriad Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

h1,
h2,
h3 {
	font-family: "Montserrat", "Segoe UI", sans-serif;
}

a:hover,
button:hover {
	cursor: pointer !important;
}

red {
	color: var(--red);
}

redbg,
.redbg {
	background-color: var(--red);
}

.redbg.white {
	background-color: var(--red);
	color: #fff;
}

gold,
.gold {
	color: var(--gold);
}

.row {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.col {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.row > *,
.col > * {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.app-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 8px;
}

.app-header h1 {
	margin: 0 0 0.35rem;
	font-size: clamp(1.6rem, 2.1vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--muted);
	font-family: "PTSerif";
}

.app-header h1 span {
	font-size: 1rem;
}

.app-header .muted {
	font-size: 0.9rem;
	color: var(--muted);
}

.skip-link {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	padding: 0.75rem 1rem;
	background-color: #000;
	color: #fff;
	border-radius: 0.25rem;
	z-index: 10000;
	-webkit-transform: translateY(-200%);
	transform: translateY(-200%);
	-webkit-transition: -webkit-transform 0.15s ease;
	transition: -webkit-transform 0.15s ease;
	transition: transform 0.15s ease;
	transition: transform 0.15s ease, -webkit-transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.bg-gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #ffffff;
	background: linear-gradient(167deg,rgba(180, 199, 222, 0.55) 0%, rgba(255, 255, 255, 0.85) 70%);
	z-index: 0px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.container {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	padding: 24px 64px;
}