/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/*! modern-normalize v0.6.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/* Document
   ========================================================================== */

/**
 * Use a better box model (opinionated).
*/

html {
	box-sizing: border-box;
}


*,
*::before,
*::after {
	box-sizing: inherit;
}

/**
 * Use a more readable tab size (opinionated).
*/

:root {
	-moz-tab-size: 4;
	tab-size: 4;
}

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 * Use a dotted underline in browsers that support it (e.g. Firefox, Chrome, etc...)
 * Fallback on a dotted bottom border in browsers that don't support it (e.g. IE11, Edge, etc...)
 * Source: https://github.com/necolas/normalize.css/pull/738#issuecomment-387549760
 */

abbr[title] {
	text-decoration: none;
	border-bottom: 1px dotted;
}

@supports (text-decoration: underline dotted) {
	abbr[title] {
		text-decoration: underline dotted;
		border-bottom: 0;
	}
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-weight: bolder;
}

/**
 * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
	font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
 * Show the overflow in IE and Edge.
 */

button {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 */

button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
	overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
	display: none;
}





/* ==========================================================================
   BASE / RESETS
   ========================================================================== */

/**
 * This contains some additional resets and baselines not facilitated by
 * 'normalize.css'. Editing is not recommended.
 */

html {
	scroll-behavior: smooth;
}

/**
 * Implement a reduced-motion mode if the user has selected this system option.
 * Remove _all_ animations and transitions for people that prefer not to see them.
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
 * https://css-tricks.com/introduction-reduced-motion-media-query/
 */
@media screen and (prefers-reduced-motion: reduce) {
	* {
		animation-play-state: paused !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}
}





/* Vertical Rhythm
   =========================================== */

/**
 * Apply our base spacing unit as a `margin-bottom` to all block level elements
 * so that we get nice and consistent vertical rhythm very cheaply.
 * http://csswizardry.com/2012/06/single-direction-margin-declarations/
 */
address,
blockquote,
dl,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
menu,
ol,
p,
pre,
summary,
table,
ul {
	margin-top: 0;
	margin-bottom: var(--global-spacing-unit);
}

fieldset,
figure {
	margin-right: 0;
	margin-left: 0;
	padding: 0;
}


/**
 * We'll also indent list elements by the same amount of spacing. Also, we will
 * remove the left padding added by some user-agents.
 */
dd,
ol,
ul {
	margin-left: var(--global-spacing-unit);
	padding-left: 0;
}

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
	margin-bottom: 0;
}





/**
 * Pseudo Selection
 */
::-moz-selection {
	background: #eaeaea;
	text-shadow: none;
}

::selection {
	background: #eaeaea;
	text-shadow: none;
}

::selection:window-inactive {
	background: #eaeaea;
}

img::selection {
	background: rgba(0, 0, 0, 0);
}

img::-moz-selection {
	background: rgba(0, 0, 0, 0);
}





/**
 * Identify Disabled/Not Allowed Elements
 */
*[disabled] {
	cursor: not-allowed;
}





/**
 * Make placeholders have the same positioning as control text in safari.
 */
::placeholder {
	line-height: normal;
}





/**
 * Breakpoints
 * These values will not show up in content, but can be queried by JavaScript
 * to know which breakpoint is active.
 */
body::before {
	display: none;
	content: "xsmall";
	visibility: hidden;
}

@media (min-width: 40em) {
	body::before {
		content: "small";
	}
}

@media (min-width: 48em) {
	body::before {
		content: "medium";
	}
}

@media (min-width: 60em) {
	body::before {
		content: "large";
	}
}

@media (min-width: 75em) {
	body::before {
		content: "xlarge";
	}
}

@media (min-width: 90em) {
	body::before {
		content: "wide";
	}
}





/* ==========================================================================
   SETTINGS / GLOBAL
   Set all your global CSS variables in this file.
   Overrides should be placed in the 'ui/css/theme-styles.scss' file.
   ========================================================================== */

:root {
	/* root settings
	   =========================================== */
	--base-measure: 16;





	/* width constraints
	   =========================================== */
	--site-max-width: 100vw;
	--wrapper-max-width: 80rem;





	/* typography settings
	   =========================================== */
	--global-font-size: 16px;
	--primary-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--secondary-font-family: "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", "Times", "Source Serif Pro", serif;





	/* border settings
	   =========================================== */
	--global-border-width: 1px;
	--global-border-radius: 0.125em;





	/* breakpoints
	   =========================================== */
	--breakpoint-small: 640;
	--breakpoint-medium: 768;
	--breakpoint-large: 960;
	--breakpoint-x-large: 1200;
	--breakpoint-wide: 1440;





	/* miscellaneous
	   =========================================== */
	--global-spacing-unit: 16px;
}




/* ==========================================================================
   SETTINGS / TYPOGRAPHY
   This is where the global typography measurements are set.
   Overrides should be placed in the 'ui/css/theme-styles.scss' file.
   ========================================================================== */

:root {
	--min-font-scale: 1.2; /* Minor Third Font Scale */
	--max-font-scale: 1.333; /* Perfect Fourth Font Scale */
	--min-line-height: 1.5;
	--max-line-height: 1.8;

	/* Editing below this point is not recommended */
	--base-line-height: 1.5;
	--screen-compensation: calc((100vw - (var(--breakpoint-small) * 1px) ) / (var(--breakpoint-large) - var(--breakpoint-small)));
	--echo: var(var(--global-font-size));
	--foxtrot-min: calc(var(--echo) / var(--min-font-scale));
	--foxtrot-max: calc(var(--echo) / var(--max-font-scale));
	--delta-min: calc(var(--echo) * var(--min-font-scale));
	--delta-max: calc(var(--echo) * var(--max-font-scale));
	--charlie-min: calc(var(--delta-min) * var(--min-font-scale));
	--charlie-max: calc(var(--delta-max) * var(--max-font-scale));
	--bravo-min: calc(var(--charlie-min) * var(--min-font-scale));
	--bravo-max: calc(var(--charlie-max) * var(--max-font-scale));
	--alpha-min: calc(var(--bravo-min) * var(--min-font-scale));
	--alpha-max: calc(var(--bravo-max) * var(--max-font-scale));

	--heading-alpha-min: var(--alpha-min);
	--heading-alpha-max: var(--alpha-max);
	--heading-alpha-fluid: calc( var(--heading-alpha-min) + (var(--alpha-max) - var(--alpha-min)) * var(--screen-compensation) );
	--heading-bravo-min: var(--bravo-min);
	--heading-bravo-max: var(--bravo-max);
	--heading-bravo-fluid: calc( var(--heading-bravo-min) + (var(--bravo-max) - var(--bravo-min)) * var(--screen-compensation) );
	--heading-charlie-min: var(--charlie-min);
	--heading-charlie-max: var(--charlie-max);
	--heading-charlie-fluid: calc( var(--heading-charlie-min) + (var(--charlie-max) - var(--charlie-min)) * var(--screen-compensation) );
	--heading-delta-min: var(--delta-min);
	--heading-delta-max: var(--delta-max);
	--heading-delta-fluid: calc( var(--heading-delta-min) + (var(--delta-max) - var(--delta-min)) * var(--screen-compensation) );
	--heading-echo-fluid: calc( var(--echo) * var(--screen-compensation) );
	--heading-foxtrot-min: var(--foxtrot-min);
	--heading-foxtrot-max: var(--foxtrot-max);
	--heading-foxtrot-fluid: calc( var(--heading-foxtrot-min) + (var(--foxtrot-max) - var(--foxtrot-min)) * var(--screen-compensation) );
}

@media (min-width: 40em) {
	:root {
		--base-line-height: calc((var(--min-line-height) + var(--max-line-height)) / 2);
	}
}

@media (min-width: 60em) {
	:root {
		--base-line-height: 1.8;
	}
}




/* ==========================================================================
   ELEMENTS / PAGE
   ========================================================================== */

/**
 * High-level, page-level styling.
 *
 * 1. Ensure the page always fills at least the entire height of the viewport.
 * 2. Force scroll bars to always be visible to prevent awkward 'jumps' when
 *    navigating between pages that do/do not have enough content to produce
 *    scroll bars naturally.
 * 3. Set the default 'font-size' and 'line-height' for the entire project,
 *    sourced from our default variables. The 'font-size' is calculated to exist
 *    in ems.
 * 4. Fonts on OSX will look more consistent with other systems that do not
 *    render text using sub-pixel anti-aliasing.
 * 5. Prevent certain mobile browsers from automatically zooming fonts.
 * 6. Set the, non-standard, color of the highlight that appears over a link
 *    when it is being tapped in some browsers.
 * 7. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
 */

html {
	height: 100%;
	min-height: 100%; /* [1] */
	overflow-y: scroll; /* [2] */
	font-family: var(--primary-font-family);
	font-size: 1em; /* [3] */
	-webkit-font-smoothing: antialiased; /* [4] */
	-moz-osx-font-smoothing: grayscale; /* [4] */
	line-height: var(--base-line-height); /* [3] */
	-webkit-text-size-adjust: 100%; /* [5] */
	-ms-text-size-adjust: 100%; /* [5] */
	color: #4a4a4a;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	touch-action: manipulation; /* [7] */
}


body {
	display: flex;
	min-height: 100%;
	flex-direction: column;
}

main {
	flex-grow: 1;
}

.is-loaded {
	opacity: 1;
	transition: opacity ease-in 0.3s;
}

a:hover {
	transition: color ease-in-out 0.3s;
}

a:focus {
	text-decoration: none;
	outline: 2px dashed currentColor;
	outline-offset: 0.5ch;
}

hr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 1px;
	margin: 3em 2vw;
	background-image: linear-gradient(to right, #f0f0f0, #8f8f8f, #f0f0f0);
	border: 0 none;
}

hr::after {
	padding: 0.25em;
	content: '\1F989';
	font-size: 2em;
	background-color: #fff;
}

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


.t-site-header {
	padding: 0.5em 4vw;
	font-size: 2rem;
	background-color: #0b0b0b;
}

.t-site-header a,
.t-site-footer a {
	color: #fff;
}

.t-site-header a:focus,
.t-site-header a:hover,
.t-site-footer a:focus,
.t-site-footer a:hover {
	color: #faf2cc;
}

.t-display-font {
	font-family: 'Milonga', cursive;
	line-height: 1;
}

.t-site-content {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 2vw 4vw 4vw;
}

.t-introduction {
}

.t-introduction h1 small {
	display: block;
	font: normal italic 0.7em/1 var(--secondary-font-family);
}

.t-introduction p {
	margin-bottom: 0.25em;
}

.t-featured-projects {
	width: 100%;
}

.t-project {
	margin: 0 auto 4vmax;
}

@media (min-width: 48em) {
	.t-project {
		max-width: 60rem;
		margin: 0 auto 2vmax;
		padding: 0 1vmax;
	}
}

	.t-project figure {
		display: flex;
		flex-direction: column;
		margin: 0;
	}

		.t-project picture {
			display: flex;
			align-items: center;
			flex-basis: 360px;
			justify-content: center;
		}

		.t-project figcaption {
			flex: 1;
		}

	@media (min-width: 48em) {
		.t-project figure {
			flex-direction: row;
		}

		.t-project:nth-child(even) figure {
			flex-direction: row-reverse;
		}

			.t-project figcaption {
				padding: 1rem 2rem 0;
			}
	}



.t-site-footer {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 4vmax 4vw 2vmin;
	color: #fff;
	background-color: #0b0b0b;
	fill: currentColor;
}


.t-site-footer__heading {
	margin: 0;
	line-height: 1;
	text-align: center;
}

.t-site-footer__heading::after {
	display: inline-block;
	width: 33%;
	height: 2px;
	background-color: currentColor;
	content: '';
}

.t-site-footer__content {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 60rem;
	padding: 4vmax 2vw;
}

.t-site-footer__content-text {
	flex: 1;
}

@media (min-width: 48em) {
	.t-site-footer__content-text {
		padding-left: 2rem;
	}
}

.t-site-footer__navigation {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	max-width: 60rem;
	margin-bottom: 2rem;
}

.t-site-footer__social-link {
	color: #fff;
	fill: #fff;
}