/* || GENERAL STYLES */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 16px;
	background: var(--trc-gry9);
}
body {
	font-family: var(--ff-sns);
	/* max-width: 65rem; 
	margin: 0 auto; */
	height: 13rem;
	position: relative;
}
a {
	text-decoration: none;
}
.banner {
	position: relative;
	margin-bottom: 1.5rem;
	z-index: -1;
}
.banner img {
	border: 2px solid var(--trc-brn4);
	width: 100%;
}
.banner h1 {   /* srm.css */
	font-family: var(--ff-sns);
	font-weight: 700;
	color: var(--trc-gry9);
	opacity: 50%;
	position: absolute;
	font-size: min(7vw, 5rem);
}
.frame {
	aspect-ratio: 3 / 1;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.frame > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.imposter {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	background: #ffffffcc;
	padding: 1rem;
	max-height: 100%;
}
.imposter img {
	padding: 1rem;
}
@media (orientation: portrait) {
	.frame {
		aspect-ratio: 2 / 1;
	}
	.imposter {
		inset-block-start: 30%;
		inset-inline-start: 30%;
		transform: translate(-20%, -22%);
	}
}
.verse, .reference {
	font-family: var(--ff-crs);
	font-size: clamp(1.3rem, 4vw, 1.8rem);
	color: var(--trc-grn4);
	text-align: center;
	line-height: 1;
	margin: 0vw 5vw;
}
.reference {
	font-weight: 700;
	margin-top: 3vw;
}
.logo {
	padding: 2rem;
}
.logo img {
  display: block;
  margin: auto;
  width: 80%;
  max-width: 300px;
}
div.uc-note {
	margin-bottom: 1rem;
	padding: 1rem;
	border: 2px dashed var(--trc-brn4);
	margin-inline: 25%;
	@media (orientation: portrait) {
		& {
			margin-inline: 10%;
		}
	}
}
div.uc-note .subpage {
	padding-top: 2rem;
}
div.uc-note p {
	color: var(--trc-brn5);
	font-style: italic;
	font-weight: 700;
	font-size: var(--fs-sm);
	padding: 0;
}
div.uc-note a {
	color: var(--trc-grn5);
	display: block;
	text-decoration: none;
	text-align: right;
	font-size: var(--fs-sm);
	font-weight: 700;
	margin: 0.3rem;
	margin-top: 0.6rem;
}
div.uc-note a:hover {
	color: var(--trc-grn7);
}
div.uc-note .subpage {
	padding-top: 2rem;
	color: var(--trc-gry5);
}
div.uc-note .alert {
	border: 3px dashed red;
	color: red;
}
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, 300px);
	gap: 2rem;
	justify-content: space-around;
	align-items: space-around;
	padding-left: 1rem;
	padding-bottom: 1rem;
}
.cards article {
	border: 0px;
	display: flex;
	flex-flow: column nowrap;
	margin: 0.6rem 0.6rem 0rem 0.6rem;
	justify-content: flex-start;
	align-items: center;
	width: 15rem;
}
.cards h3 {
	font-family: var(--ff-crs);
	font-size: var(--fs-3xl);
	font-weight: 500;
	color: var(--trc-brn5);
	text-align: center;
	margin-top: -0.4rem;
}
.cards img {
	mask-image: linear-gradient(rgba(0,0,0,1) 0 50%, transparent 95%);
	border-radius: 3%;
	width: 230px;
}
.cards p {
	font-size: var(--fs-sm);
	text-align: center;
	margin: 0.3rem 0.6rem 0.3rem 0.6rem;
}
.cards p.edate {
	color: var(--trc-brn5);
	font-weight: 600;
	font-style: italic;
}
.cards p.edate:first-of-type {
	margin-bottom: 0rem;
}
.cards a {
	color: var(--trc-grn5);
	text-decoration: none;
	align-self: flex-end;
	font-size: var(--fs-sm);
	font-weight: 700;
	padding: 0;
	margin: 0.3rem;
}
.cards a:hover {
	color: var(--trc-grn7);
}
h1.team-heading {
	font-family: var(--ff-crs);
	font-size: clamp(1.7rem, 2.3vw, 1.8rem);
	font-weight: 400;
	font-variant: small-caps;
	color: var(--trc-grn4);
	text-align: center;
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--trc-grn8);
	text-underline-offset: 0.5rem;
}
h2.team-heading {
	font-family: var(--ff-crs);
	font-weight: 700;
	font-size: clamp(3.5rem,10.5vw,4rem);
	text-transform: uppercase;
	text-align: center;
	color: var(--trc-grn3);
}
.sitemap {
	color: var(--trc-brn8);
	background: var(--trc-gry1);
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.bw {
	color: var(--trc-gry9);
}
.active {
	color: var(--trc-grn5);
}
ul.sitemap {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 0rem;
}
footer.bw ul.sitemap {
	color: var(--trc-gry7);
}
ul.sitemap li {
	display: block;
	flex: 1 1 auto;
	margin-top: 1.3rem;
	text-align: center;
	font-family: var(--ff-sns);
	font-weight: 700;
	font-size: var(--fs-sm);
	border-right: 1px solid var(--trc-grn7);
}
ul.sitemap li:last-of-type {
	border-right: none;
}
ul.sitemap a {
	display: block;
	font-family: var(--ff-sns);
	font-weight: 400;
	margin-top: 1.2rem;
}
footer {
	padding-top: 1rem;
	padding-bottom: 1rem;
	display: block;
	color: var(--trc-gry3);
	font-style: italic;
	font-family: "Rokkitt", serif;
	text-align: center;
	background: var(--trc-gry8);
}
footer p {
	font-size: 1.1rem;
}
footer p.org {
	font-weight: 700;
}
footer > ul:not(.sitemap) {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	font-family: var(--ff-sns);
	font-size: var(--fs-sm);
	font-style: italic;
}
footer.bw {
	color: var(--trc-gry5);
	background: white;
}
.obsf {
	unicode-bidi: bidi-override;
	direction: rtl;
}
ul.contact-info {
	margin-top: 1rem;
}
ul.social-media {
	padding-top: 1rem;
	justify-content: center;
}
h1 {
	font-size: var(--fs-4xl);
	font-weight: 700;
}
h2 {
	font-size: var(--fs-3xl);
	font-weight: 700;
}
h3 {
	font-size: var(--fs-2xl);
}
h4 {
	font-size: var(--fs-xl);
}
h5 {
	font-size: var(--fs-lg);
}
h6 {
	font-size: var(--fs-md);
}
p {
	font-size: var(--fs-md);
	color: var(--trc_grn3);
}
img {
}
figure {
}
figcaption {
}
a {
	/* text-decoration: none; */
	color: inherit;
}
a:hover {
	font-weight: 700;
}
a:visited {
}
ul {
	list-style-type: none;
}
li {
}
button {
}
cite {
}
address {
}

/* || UTILITIES */

.fa {
  padding: 10px;
  font-size: 50vmin;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
.fa:hover {
  color: var(--trc-gry7);
}

/* || VARIABLES */

/* Colours */
:root {
	--trc-grn1: #19210d;
	--trc-grn2: #32421a;
	--trc-grn3: #4a6428;
	--trc-grn4: #638535;
	--trc-grn5: #7ca642;
	--trc-grn6: #96b868;
	--trc-grn7: #b0ca8e;
	--trc-grn8: #cbdbb3;
	--trc-grn9: #e5edd9;
	--trc-brn1: #1a150d;
	--trc-brn2:	#332a1b;
	--trc-brn3: #4d4028;
	--trc-brn4: #665536;
	--trc-brn5: #806a43;
	--trc-brn6: #998869;
	--trc-brn7: #b3a68e;
	--trc-brn8: #ccc3b4;
	--trc-brn9: #e6e1d9;
	--trc-blk1: #0c0d0e;
	--trc-blk2: #171a1c;
	--trc-blk3:	#23272b;
	--trc-blk4: #2e3439;
	--trc-blk5: #3a4147;
	--trc-blk6: #61676c;
	--trc-blk7: #898d91;
	--trc-blk8: #b0b3b5;
	--trc-blk9: #d8d9da;
	--trc-gry1: #181b1c;
	--trc-gry2: #303639;
	--trc-gry3: #495055;
	--trc-gry4:	#616b72;
	--trc-gry5: #79868e;
	--trc-gry6: #949ea5;
	--trc-gry7: #afb6bb;
	--trc-gry8: #c9cfd2;
	--trc-gry9: #e4e7e8;
}

/* Font sizes */
:root {
	--fs-3xs: 0.5rem;
	--fs-2xs: 0.6rem;
	--fs-xs: 0.7rem;
	--fs-sm: 0.875rem;
	--fs-sm: clamp(0.925rem, 1.5vw, 1.0rem);
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.25rem;
	--fs-2xl: 1.5rem;
	--fs-3xl: 2rem;
	--fs-4xl: 3rem;
}

/* Font families */

.rokkitt-regular {
  font-family: "Rokkitt", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.rokkitt-italic {
  font-family: "Rokkitt", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}

.rokkitt-bold {
  font-family: "Rokkitt", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-sans-bold {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


:root {
	--ff-srf: 'Rokkitt', serif;
	--ff-crs: 'Rokkitt', cursive;
	--ff-sns: 'Ubuntu Sans', sans-serif;
}

/* Line heights */
:root {
	--lh-sm: 1.25;
	--lh-md: 1.5;
}

/* Letter spacings */
:root {
	--ls-sm: 0.05em;
	--ls-md: 0.1em;
}