/*
// Styles for general use
*/


/*
// SETTINGS
*/


/*
// Grid
*/


/*
@lost flexbox flex;
*/


:root {
	--container-padding: calc(var(--f-padding) * 40);

	--f-summit: 1100;
	--f-screen: 100vw;
	--f-foot: 1 / 16;
	--f-hill: (var(--f-screen) - 20rem) / (var(--f-summit) / 16 - 20) + var(--f-foot) * 1rem;

	--f-body: ((1.08 / 16 - var(--f-foot)) * var(--f-hill));
	--f-padding: ((2 / 16 - var(--f-foot)) * var(--f-hill));
}


@media screen and (min-width: 1100px) {
  :root {
    --f-screen: calc(var(--f-summit) * 1px);
  }
}


/*
// Variables
*/


:root {
	/* Colors */
	--white: 255, 255, 255;
	--white-hsl: hsl(0, 0%, 100%);
	--ship: 39, 35, 27;
	--ship-hsl: hsl(40, 18%, 13%);
	--misc: 213, 210, 219;
	--misc-hsl: hsl(263, 11%, 84%);
	--black: var(--ship);
	--baltic: 39, 35, 27;
	--baltic-hsl: hsl(40, 18%, 13%);
	--violet: 8, 124, 166;
	--violet-hsl: hsl(196, 91%, 34%);
	--viking: 244, 93, 105;
	--viking-hsl: hsl(355, 87%, 66%);
	--rose: 10, 36, 97;
	--rose-hsl: hsl(222, 82%, 21%);
	--reef: 157, 47, 122;
	--reef-hsl: hsl(319, 54%, 40%);

	/* Native element overrides -- override per section */
	--accent-color: rgb(var(--baltic));
	--secondary-color: rgb(var(--viking));

	/* Site sections */
	--thinking: var(--reef);
	--thinking-safe: var(--reef);
	--doing: var(--rose);
	--doing-safe: var(--rose);
	--speaking: var(--violet);
	--speaking-safe: var(--violet);
	--collaborate: var(--viking);
	--collaborate-safe: var(--collaborate);

	/* Section colors */
	--section-home: var(--thinking);
	--section-blog: var(--thinking);
	--section-about: var(--doing);
	--section-speaking: var(--speaking);
	--section-contact: var(--collaborate);
	--section-blog-inverse: #fff;

	/* Social colors */
	--social-twitter: 85, 172, 238;
	--social-twitter-hsl: hsl(206, 82%, 63%);
	--social-linkedin: 0, 119, 181;
	--social-linkedin-hsl: hsl(201, 100%, 35%);
	--social-instagram: 193, 53, 132;
	--social-instagram-hsl: hsl(326, 57%, 48%);

	/* Specific styles */
	--c-body-text: rgb(var(--black));
	--c-link: var(--c-body-text);
	--c-body-link: var(--c-link);
	--c-hr: rgb(var(--misc), 0.3);
	--background: #fff;
	--ne-body-font-size: calc(var(--f-body) * 16);
	--ne-root-font-size: calc(var(--f-body) * 16);
	--ne-outline-color: var(--accent-color);

	/* Header */
	--header-height: 6em;

	/* Font weights */
	--w-light: 200;
	--w-regular: 400;
	--w-medium: 500;
	--w-semi-bold: 600;
	--w-bold: 700;
	--w-black: 800;

	/* Font families */
	--font: 'Montserrat', Arial, system-ui;

	/* Spacing */
	--space: 1em;
	--space-xs: 0.4em;
	--space-sm: 0.8em;
	--space-md: 1em;
	--space-lg: 1.4em;
	--space-xl: 1.6em;
	--pad: 2em;
	--pad-input: 0.5em;
}


/*
// DEFAULTS
*/


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


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


/**
 * 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 */
}


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */


pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}


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


/**
 * Remove the gray background on active links in IE 10.
 */


a {
  background-color: transparent;
}


/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */


abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}


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


b,
strong {
  font-weight: bolder;
}


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */


code,
kbd,
samp {
  font-family: monospace, 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;
}


/* Embedded content
   ========================================================================== */


/**
 * Remove the border on images inside links in IE 10.
 */


img {
  border-style: none;
}


/* 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.
 * 1. Show the overflow in Edge.
 */


button,
input { /* 1 */
  overflow: visible;
}


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


button,
select { /* 1 */
  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 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}


/**
 * 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;
}


/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */


[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}


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


[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;
}


/*
// Page & classes
*/


* {
	box-sizing: border-box;
}


body {
	background: var(--c-background);
	line-height: 1.6;
	color: var(--c-body-text);
	font-family: var(--font);
	font-weight: var(--w-regular);
	padding-top: var(--header-height);
}


.container {
	margin: var(--container-padding);
}


#body,
.header,
.footer {
	width: 100%;
}


.main {
	margin-left: 50vw;
}


@media (max-width: 860px) {


.main {
		margin-left: 0
}
	}


.turbolinks-progress-bar {
	background-color: var(--accent-color);
	background-color: rgb(var(--accent-color));
}


hr {
	display: block;
	margin: 3em 0;
	border: 0;
	background: var(--c-hr);
	height: 2px;
	text-align: left;
}


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


p.empty {
	margin: 0;
	padding: 0;
	line-height: 0;
}


:target::before {
	display: block;
	margin: -300px 0 0;
	height: 300px;
	content: "";
}


:focus {
  outline: 2px solid rgb(var(--accent-color));
	background: rgba(var(--accent-color), 0.2);
}


.js-focus-visible a:focus:not(.focus-visible),
.js-focus-visible input:focus:not(.focus-visible),
.js-focus-visible button:focus:not(.focus-visible) {
  background: transparent;
	outline-color: transparent;
}


/*
// Media Elements
*/


img,
video,
object,
picture {
	max-width: 100%;
	height: auto;
}


picture img {
	display: block;
}


iframe {
	margin-bottom: var(--space);
}


figure {
	margin-bottom: var(--space);
}


figure img {
		margin-bottom: var(--space);
	}


figcaption {
	font-style: normal;
	font-size: 1.8rem;
	color: rgba(0, 0, 0, 0.4);
}


.js-fit-picture.is-fallback {
	background-size: cover;
	background-position: center center;
}


.js-fit-picture.is-fallback picture,
	.js-fit-picture.is-fallback img {
		opacity: 0;
	}


/*
// Utilities
*/


.u-flipx {
	transform: scaleX(-1);
}


/*
// PRIORITY OBJECTS & MODULES
*/


/*
// Animations
*/


@keyframes fadeIn {
	to {
		opacity: 1;
	}
}


@keyframes fadeTransformIn {
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}


/*
// Buttons
*/


:root {
	--button-background: transparent;
	--button-shadow: rgb(var(--black));
	--button-color: rgb(var(--black));
	--button-padding: 1em 1.6em;
	--button-speed: 250ms;
	--button-easing: cubic-bezier(0.19, 1, 0.22, 1);
	--button-delay: 50ms;
	--button-font-size: 1em;
	--ne-button-background: rgb(var(--baltic));
}


button {
	font-weight: bold;
}


.btn {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	display: inline-block;
	position: relative;
	transform: scale(1);
	margin: 0;
	outline-width: 0;
	border: 2px solid currentColor;
	background: var(--button-background);
	cursor: pointer;
	padding: var(--button-padding);
	text-align: left;
	text-decoration: none;
	line-height: 1;
	color: var(--button-color);
	font-family: var(--font-med);
	font-size: var(--button-font-size);
	font-weight: var(--w-bold);
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}


.btn .svg {
	vertical-align: -3px;
}


.btn span ~ .svg,
.btn .svg ~ span {
	margin-left: var(--space-xs);
}


.btn[disabled],
.btn.is-disabled {
	pointer-events: none;
	opacity: 0.5;
}


/*
// Typography
*/


h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
	display: block;
	margin: 1.75em 0 1.2em;
	line-height: 1.28;
	font-size: 1rem;
}


/* Headings */


h1,
.h1 {
	font-size: 2.8em;
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 0.6em;
}


h2,
.h2 {
	font-size: 1.6em;
	font-weight: var(--w-semi-bold);
	margin-bottom: 0.6em;
}


h3,
.h3 {
	font-size: 1.4em;
	font-weight: var(--w-regular);
	margin-bottom: 0.6em;
}


h4,
.h4 {
	font-size: 1.2em;
	font-weight: var(--w-semi-bold);
}


h5,
.h5 {
	font-size: 1.2em;
	font-weight: var(--w-semi-bold);
}


/* Links */


a {
	color: var(--c-link);
	text-decoration: underline;
	-webkit-text-decoration-color: currentColor;
	        text-decoration-color: currentColor;
	-webkit-text-decoration-skip: auto;
	        text-decoration-skip: auto;
}


a:hover {
		opacity: 0.8;
	}


a.thicc,
.intro__content a {
	font-weight: 600;
	text-decoration-thickness: 3px;
}


a[data-social="twitter"]:hover {
	color: rgb(var(--social-twitter));
}


a[data-social="linkedin"]:hover {
	color: rgb(var(--social-linkedin));
}


a[data-social="instagram"]:hover {
	color: rgb(var(--social-instagram));
}


a.link-thinking,
.intro__content a[href^="/thinking"] {
	color: rgb(var(--thinking-safe));
	-webkit-text-decoration-color: rgba(var(--thinking-safe), 0.15);
	        text-decoration-color: rgba(var(--thinking-safe), 0.15);
}


a.link-doing,
.intro__content a[href^="/doing"] {
	color: rgb(var(--doing-safe));
	-webkit-text-decoration-color: rgba(var(--doing-safe), 0.15);
	        text-decoration-color: rgba(var(--doing-safe), 0.15);
}


a.link-speaking,
.intro__content a[href^="/speaking"] {
	color: rgb(var(--speaking-safe));
	-webkit-text-decoration-color: rgba(var(--speaking-safe), 0.15);
	        text-decoration-color: rgba(var(--speaking-safe), 0.15);
}


.highlight {
	background: transparent;
	color: #fc0;
	display: inline-block;
	padding: 0;
	overflow: visible;
	vertical-align: middle;
}


.highlight span {
		display: block;
		padding: 0;
		margin: -0.25em 0 0;
		text-shadow: 2px 2px hsl(48, 100%, 40%), 1px 1px hsl(48, 100%, 45%);
		font-weight: var(--w-bold);
	}


/* Text */


p:empty {
		display: none;
	}


p strong:not(:only-child) {
		font-family: var(--font-bold);
	}


p em {
		font-style: italic;
	}


p.md {
		font-size: 1.1em;
		line-height: 1.5;
	}


p.xl {
		font-size: 1.4em;
		font-weight: var(--w-regular);
		line-height: 1.5;
	}


p.lg,
.rich-content > strong:first-child,
.rich-content > p:first-child > strong:first-child,
.intro__content p {
	font-size: 1.6rem;
	line-height: 1.6;
	font-weight: var(--w-medium);
}


blockquote {
	margin: var(--space) 0 0 0;
	padding-left: var(--space-sm);
	border-left: 3px solid rgb(var(--accent-color));
	font-style: normal;
	font-size: 1.6em;
}


abbr {
	cursor: help;
	border-bottom: 1px dotted #000;
}


/*
// Icons
*/


/* Default social icon styles */


[class^="svg-animate"] use,
[class*=" svg-animate"] use {
	/*
	transition:fill var(--button-transition) var(--button-timing);
	*/
}


.svg {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
}


/*
// Lists
*/


ul,
ol,
.list {
	margin: var(--space) 0;
}


ul li, ol li, .list li {
		margin-bottom: 5px;
	}


.list--bare {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}


.list--bare li {
		margin: 0;
	}


/* Definition Lists */


dl {
	overflow: hidden;
	margin: 0 0 var(--space);
}


dt {
	font-weight: bold;
	font-family: var(--font-bold);
}


dd {
	margin-left: 0;
	margin-bottom: var(--space);
}


/* Tags */


.tags {
	margin: var(--space-sm) 0;
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}


.tags li {
		margin-right: 0.5ch;
	}


.tags li a,
		.tags li span {
			text-decoration: none;
			color: rgba(var(--baltic), 0.6);
		}


.tags li a::before, .tags li span::before {
				content: '#';
			}


/* Social icons */


.social-icons {
	display: flex;
	align-items: center;
}


.social-icons li + li {
		margin-left: var(--space-md);
		vertical-align: middle;
	}


.social-icons a {
		text-decoration: none;
		color: var(--ne-contact-foreground, currentColor);
		font-size: 1.4em;
	}


.social-icons a span {
			display: none;
		}


:root {
	--ne-textfield-radius: 0;
	--ne-textfield-y-padding: 0.8em;
}


label {
	margin-bottom: 0.2em;
  display: block;
}


.form__control {
	margin: var(--space-sm) 0;
}


input:required:invalid,
textarea:required:invalid {
	border: var(--ne-textfield-border, 1px solid #e3e3e3) !important;
}


input.is-edited:required:invalid,
textarea.is-edited:required:invalid {
	border-color: var(--ne-textfield-invaild-border-color,#ff4d5e) !important;
}


/*
// Tables
*/


table {
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	width: 100%;
}


th {
	text-align: left;
}


.table thead {
		border-bottom: 1px solid #000;
	}


.table th {
		line-height: 1.2;
		background-color: #fff;
		border: 0;
		padding: 1em;
	}


.table td {
		padding: 1em;
		line-height: 1.2;
		color: #343536;
		background-color: #fff;
	}


.table tr:first-child td {
		padding-top: 1.4em;
	}


.table a {
		text-decoration: underline;
	}


/*
// Print stylesheet
*/


@media print {
	* {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]::after {
		content: " (" attr(href) ")";
	}

	abbr[title]::after {
		content: " (" attr(title) ")";
	}

	.ir a::after,
	a[href^="javascript:"]::after,
	a[href^="#"]::after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}


/*
// Miscellaneous
*/


:root {
	--nav-font-weight: 600;
	--nav-highlight-height: 4px;
	--nav-text-speed: 150ms;
	--nav-highlight-speed: 300ms;
	--nav-highlight-easing: ease-in-out;
	--mobile-nav-width: 14em;
	--mobile-nav-speed: 150ms;
}


.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	height: calc(var(--header-height) + var(--header-padding));
	color: #fff;
	font-size: 1rem;
}


@media (min-width: 861px) {


.header {
		font-size: 1.4rem
}
	}


.header__wrap {
	display: flex;
	margin: 0 var(--container-padding);
	padding-top: var(--space);
	max-width: calc(50vw - var(--container-padding));
}


.header__brand {
	display: flex;
	align-items: center;
	padding-right: var(--space);
	height: var(--header-height);
	flex: 1 1  auto;
}


.header__navbar {
	flex: 1 1 auto;
	height: var(--header-height);
}


.header__logo {
	display: block;
	margin: 0;
	height: auto;
	text-decoration: none;
	line-height: 1;
	font-size: 1.5em;
	font-weight: bold;
	color: currentColor;
}


.header__logo .svg {
		color: #fff;
		width: calc(170px * 1.1);
		height: auto;
		width: clamp(160px, 100%, 200px);
	}


.header__skip {
	position: absolute !important;
	top: 0;
	left: 0;
	background: rgb(var(--black));
	padding: var(--space-sm) !important;
	color: #fff;
	font-family: var(--font-bold);
}


.header__skip:focus {
		width: auto;
		height: auto;
		clip: auto;
	}


.navbar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0 1.4em 0 1.4em;
}


.navbar__header {
	display: none;
}


.navbar__home {
	display: none !important;
}


.navbar__home a {
		color: #fff !important;
	}


.navbar__button {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	position: relative;
	transition: color var(--nav-highlight-speed) var(--nav-highlight-easing);
	z-index: 300;
	outline: 0;
	border: 0;
	background: rgb(var(--accent-color));
	cursor: pointer;
	font-size: 1em;
	border-radius: 100%;
	height: 0;
	padding: 100% 0 0 0;
	width: 50px;
	line-height: 0;
}


.navbar__button,
	.navbar__button:hover,
	.navbar__button:active {
		color: var(--nav-inverse-color, #fff);
	}


.navbar__button:hover {
		background: rgba(var(--accent-color), 0.8);
	}


.navbar__button:active {
		background: rgba(var(--accent-color), 0.7) !important;
	}


.navbar__button .icon-bar {
		display: block;
		position: absolute;
		left: 50%;
		top: calc(50% - 1.5px);
		background: currentColor;
		width: 50%;
		height: 3px;
		transition: transform 150ms ease-in-out, width 150ms ease-in-out;
		transform-origin: 0 50%;
	}


.navbar__button .icon-bar:nth-child(1) {
			transform: translate3d(-50%, -10px, 0);
		}


.navbar__button .icon-bar:nth-child(2) {
			transform: translate3d(-50%, 0, 0);
		}


.navbar__button .icon-bar:nth-child(3) {
			transform: translate3d(-50%, 10px, 0);
		}


.navbar__collapse {
	display: flex;
}


.navbar__collapse .svg-home-lines {
		display: none;
	}


.navbar__buttons {
	display: flex !important;
	align-items: center;
	padding-left: var(--space-six);
}


.navbar .nav {
	display: flex;
	position: relative;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	font-size: 0.7em;
	font-weight: 500;
	z-index: 20;
}


.navbar .nav li {
		margin-bottom: 0;
		margin-right: 2ch;
		display: inline-block;
		transition: none;
	}


.navbar .nav li:last-child {
		margin-right: 0;
	}


.navbar .nav a {
		font-weight: var(--nav-font-weight);
		display: inline-block;
		padding: 0.2em 0;
		position: relative;
		text-decoration: none;
	}


.navbar .nav a span {
			color: #fff;
			position: relative;
			z-index: 10;
		}


.navbar .nav a::before {
			position: absolute;
			bottom: 0.4em;
			left: 50%;
			transition: height 100ms ease-in-out;
			background: currentColor;
			width: 100%;
			height: 0.1em;
			content: "";
			transform: translateX(-50%);
			will-change: width;
			z-index: 5;
		}


.navbar .nav a:hover {
			opacity: 1;
		}


.navbar .nav a:hover::before {
				height: 1.35em;
			}


.navbar .nav li.active a::before {
			opacity: 1;
			width: 100% !important;
		}


@media (max-width: 1380px) {
	.header__brand {
		flex: 1 1 auto;
	}

	.header__navbar {
		flex: 0 0 auto;
	}

	.navbar__header {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: var(--header-height);
	}

	body.is-mobile-nav .navbar__close {
		transform: translateX(0) scale(1);
		transition: opacity 150ms ease-in-out 250ms, transform 150ms ease-in-out 250ms;
		visibility: visible;
		opacity: 1;
	}

	.navbar__home {
		display: block !important;
	}

	.navbar__collapse {
		position: fixed;
		top: 0;
		right: 0;
		justify-content: center;
		align-items: center;
		z-index: 200;
		background: rgba(var(--baltic), 0.99);
		width: 100vw;
		height: 100vh;
		opacity: 0;
		transition: opacity 150ms ease-in-out, visibility 0ms ease-in-out 150ms;
		visibility: hidden;
	}

		.navbar__collapse .svg-home-lines {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%, -50%, 0);
			-o-object-fit: cover;
			   object-fit: cover;
			min-width: 100% !important;
			height: 90% !important;
			width: 9999px;
			overflow: visible;
			z-index: 10;
			opacity: 0.1 !important;
			pointer-events: none;
		}

			.navbar__collapse .svg-home-lines path {
				stroke-dasharray: 800px;
				stroke-dashoffset: 800px;
				opacity: 0;
				will-change: stroke-dashoffset, opacity;
				mix-blend-mode: multiply;
			}

	body.is-mobile-nav .navbar__collapse .svg-home-lines path {
		animation: drawHomeLine 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards 1, fadeIn 800ms linear forwards 1;
	}

	.navbar {
		text-align: center;
		position: relative;
		z-index: 15;
	}

		.navbar .nav {
			flex-direction: column;
		}

			.navbar .nav a {
				display: block;
				padding: 1em 0;
				height: auto;
				line-height: 1.2;
				text-decoration: none;
				font-size: 3vmax;
				font-weight: bold;
			}

				.navbar .nav a::before {
					display: none;
				}

			.navbar .nav li {
				margin-left: 0 !important;
				transform: scale(0.9);
				opacity: 0;
			}

	.navbar__buttons {
		margin: var(--space-two) var(--space-two);
		padding: 0;
	}
		body.is-mobile-nav .navbar__collapse {
			opacity: 1;
			transition: opacity 150ms ease-in-out;
			visibility: visible;
		}

			body.is-mobile-nav .navbar__collapse .svg-home-lines {
				visibility: visible;
			}

			body.is-mobile-nav .navbar__collapse li {
				transform: scale(1);
				opacity: 1;
				transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
			}
				body.is-mobile-nav .navbar__button .icon-bar:nth-child(1) {
					transform: rotate(45deg) translate3d(-50%, 0, 0);
				}

				body.is-mobile-nav .navbar__button .icon-bar:nth-child(2) {
					width: 0;
				}

				body.is-mobile-nav .navbar__button .icon-bar:nth-child(3) {
					transform: rotate(-45deg) translate3d(-50%, 0, 0);
				}
}


@media (max-width: 1380px) {
	.header__brand {
		width: 50%;
	}

	.header__wrap {
		max-width: calc(100vw - var(--container-padding));
		padding-top: 0;
	}

	.navbar {
		margin-right: 0;
		justify-content: flex-end;
	}

	.navbar .nav {
		justify-content: flex-end;
	}

		.navbar .nav li {
			margin-right: 0;
			margin-left: 2ch;
		}
}


@media (max-width: 860px) {
	.header {
		position: relative;
		overflow: hidden;
	}

	body {
		padding-top: 0;
	}

	.header__logo .svg {
		width: calc(170px * 1);
		height: calc(64px * 1);
		position: relative;
	}

	.navbar {
		background: transparent;
	}


	.navbar__button {
		background: transparent;
		box-shadow: none;
		margin-right: -20%;
		color: #fff !important;
	}

		.navbar__button .icon-bar {
			width: 55%;
		}
}


@media (max-width: 640px) {
	.header__logo .svg {
		max-width: 90%;
	}
}


.social-footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 50vw;
	height: auto;
	color: #fff;
	z-index: 10;
	overflow: visible;
/*
	&:after {
		display: none;
		content: "";
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 120%;
		left: 0;
		z-index: 11;
		background: linear-gradient(0deg, rgba(var(--baltic), 0.5), transparent);
	}
*/
}


.social-footer__wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: var(--space-xs) 3em var(--space-xs) 3em;
	position: relative;
	z-index: 12;
}


.social-footer__title {
	margin: 0 var(--space-md) 0 0;
	flex: 1 1 auto;
	font-size: 0.9em;
    text-align: right;
}


.social-footer__title span,
    .social-footer__title svg {
        color: currentColor;
    }


.social-footer__title span {
		border-radius: 6px;
		padding: 0.4ch 0.6ch;
		vertical-align: -0.15em;
	}


.social-footer__title span::after {
			content: ":";
		}


@media (max-width: 860px) {
	.social-footer {
			position: relative;
			background: transparent;
			width: auto;
			color: var(--baltic);
	}

	.social-footer__wrap {
			border-top: 1px solid var(--c-hr);
			margin: 3em var(--container-padding);
	}

	.social-footer::after {
		display: none;
	}
}


/* Home */


:root {
	--hero-bg: rgb(var(--baltic));
}


.hero {
	background: var(--hero-bg);
	position: fixed;
	top: 0;
	left: 0;
	width: 50vw;
	height: 100%;
	color: #fff;
	padding-top: (var(--header-height) * 1.4);
	overflow: hidden;
}


.hero__bg,
.hero__bg img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	z-index: 0;
}


.hero .svg-home-lines {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	-o-object-fit: cover;
	   object-fit: cover;
	min-width: 95% !important;
	height: 95% !important;
	width: 9999px;
	overflow: visible;
}


.hero .svg-home-lines path {
		stroke-dasharray: 800px;
		stroke-dashoffset: 800px;
		animation: drawHomeLine 1.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards 1, fadeIn 800ms linear forwards 1;
		opacity: 0;
		will-change: stroke-dashoffset, opacity;
		mix-blend-mode: multiply;
	}


@media (min-width: 641px) {


body:not([data-section="home"]) .svg-home-lines:not(.svg-home-lines__nav) {
		min-width: 120% !important;
		height: 120% !important
}
	}


body:not([data-section="home"]) .svg-home-lines:not(.svg-home-lines__nav) #reef {
		stroke: rgba(var(--reef), 0.2);
	}


body:not([data-section="home"]) .svg-home-lines:not(.svg-home-lines__nav) #rose {
		stroke: rgba(var(--rose), 0.2);
	}


body:not([data-section="home"]) .svg-home-lines:not(.svg-home-lines__nav) #viking {
		stroke: rgba(var(--viking), 0.2);
	}


body:not([data-section="home"]) .svg-home-lines:not(.svg-home-lines__nav) #violet {
		stroke: rgba(var(--violet), 0.2);
	}


body:not([data-section="home"]) .svg-home-lines:not(.svg-home-lines__nav) path {
		stroke-width: 2px !important;
		mix-blend-mode: multiply;
	}


body[data-section="blog"] .hero .svg-home-lines #reef {
	stroke-width: 4px !important;
	stroke: rgb(var(--reef));
}


@media (min-width: 641px) {


body[data-section="about"] .hero .svg-home-lines {
		transform: translate3d(-50%, calc(-50% + 280px), 0)
}
	}


body[data-section="about"] .hero .svg-home-lines #rose {
		stroke-width: 4px !important;
		stroke: rgb(var(--rose));
	}


@media (min-width: 641px) {


body[data-section="speaking"] .hero .svg-home-lines {
		transform: translate3d(-50%, calc(-50% - 280px), 0)
}
	}


body[data-section="speaking"] .hero .svg-home-lines #violet {
		stroke-width: 4px !important;
		stroke: rgb(var(--violet));
	}


@media (min-width: 641px) {


body[data-section="contact"] .hero .svg-home-lines {
		transform: translate3d(-50%, calc(-50% + 280px), 0)
}
	}


body[data-section="contact"] .hero .svg-home-lines #viking {
		stroke-width: 4px !important;
		stroke: rgb(var(--viking));
	}


@keyframes drawHomeLine {
	to {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}


.hero .container {
	margin-top: var(--container-padding);
	height: calc(100vh - var(--header-height));
	position: relative;
	z-index: 1;
}


.hero__wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	font-size: 1.5em;
}


.hero__title {
	font-size: 5vw;
	margin: -4.5vw 0 0 0;
	font-weight: 800;
}


.hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(10, 10, 10, 0.4);
	background-image: linear-gradient(180deg, rgba(var(--baltic), 0.6) 0%, rgba(var(--baltic), 0.6) 12%, rgba(var(--baltic), 0.1) 100%);
	z-index: 0;
}


@media (max-width: 860px) {
	.hero {
		position: relative;
		width: 100%;
		height: auto;
		padding-top: var(--header-height);
		margin-top: calc(0px - var(--header-height));
	}

	.hero .svg-home-lines {
		width: 100% !important;
		height: auto !important;
	}

		.hero .svg-home-lines path {
			animation: drawHomeLine 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards 1, fadeIn 800ms linear forwards 1;
		}

	.hero__title {
		margin: var(--space-md) 0;
	}

	.hero .container {
		height: auto;
	}
}


@media (max-width: 640px) {
	.hero__title {
		font-size: 8vw;
		max-width: 100%;
	}
}


.intro__wrap .h1 {
	margin-top: 2em;
}


.intro .container, .home-logos .container, .home-thinking .container {
		margin-top: 4em;
		margin-bottom: 4em;
	}


.intro h2, .home-logos h2, .home-thinking h2 {
		margin-bottom: 1.2em;
		font-weight: 800;
	}


.home-logos {
	background-color: rgb(var(--section-about), 0.02);
	overflow: hidden;
}


.home-logos__logos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-gap: 1em;
	gap: 1em;
}


.home-logos__logo {
	background: rgba(0, 0, 0, 0.02);
	height: 0;
	position: relative;
	flex: 0 0 auto;
	padding-bottom: 100%;
}


.home-logos__logo picture {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	max-width: 75%;
	max-height: 75%;
	width: 100%;
}


.home-thinking {
	background: white;
	overflow: hidden;
}


body[data-section="blog"],
body[data-section="post"] {
	--ne-links-foreground: rgb(var(--thinking-safe));
	--ne-links-active-foreground: rgb(var(--thinking-safe));
	--ne-outline-color: rgb(var(--thinking));
	--accent-color: var(--thinking);
}


.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
    grid-gap: 3em var(--space-xl);
}


.blog__posts article.is-animated {
		transform: translate3d(0, 100px, 0);
		animation: fadeTransformIn 250ms ease-in-out forwards 1;
	}


.blog__posts article.is-animated.is-visible {
			animation: fadeTransformIn 250ms ease-in-out forwards 1 !important;
		}


@media (max-width: 640px) {
		.blog__posts article:nth-child(2) ~ article.is-animated {
			animation: none 0s ease 0s 1 normal none running;
			animation: initial;
			opacity: 0;
		}
	}


@media (min-width: 641px) {
		.blog__posts article {
			animation: fadeTransformIn 250ms ease-in-out forwards 1;
			transform: translate3d(0, 100px, 0);
			opacity: 0;
		}

			.blog__posts article:nth-child(1) {
				animation-delay: 200ms;
			}

			.blog__posts article:nth-child(2) {
				animation-delay: 300ms;
			}

			.blog__posts article:nth-child(3) {
				animation-delay: 400ms;
			}

			.blog__posts article:nth-child(4) {
				animation-delay: 500ms;
			}

			.blog__posts article:nth-child(4) ~ article.is-animated {
				animation: none 0s ease 0s 1 normal none running;
				animation: initial;
				opacity: 0;
			}

				.blog__posts article:nth-child(4) ~ article.is-animated:nth-child(even) {
					animation-delay: 100ms !important;
				}
}


.post-grid__thumbnail {
	position: relative;
	display: block;
}


.post-grid__image {
	width: 100%;
	height: 0;
	padding-bottom: 50%;
	position: relative;
	z-index: 10;
}


.post-grid__image picture {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	}


.post-grid__tags {
	margin: 0 0 var(--space-sm);
}


.post-grid__meta {
	color: rgb(var(--thinking-safe));
	font-size: 0.9em;
	margin: var(--space-lg) 0 0.2em;
}


a.post-grid__title {
	color: rgb(var(--black));
	text-decoration: none;
}


a.post-grid__title h1 {
		font-size: 1.4em;
		line-height: 1.3;
		margin: 0 0 0.6em;
	}


.post-grid__excerpt {
	margin-bottom: 0.6em;
}


a.post-grid__link {
	color: rgb(var(--thinking-safe));
}


.post__date {
	color: rgb(var(--thinking-safe));
	font-weight: 600;
}


.post__meta {
	margin: 0 0 var(--space-lg);
}


.post__tags {
	margin-top: 3em;
	padding-top: var(--space-md);
	border-top: 1px solid rgb(var(--thinking));
}


.post__nav {
	margin-top: var(--space-lg);
}


.post__nav a {
		text-decoration: none;
		font-weight: 500;
	}


.post__nav .svg {
		margin-right: 0.5ch;
		stroke-width: 2px;
	}


body[data-section="about"] {
	--ne-links-foreground: rgb(var(--doing-safe));
	--ne-links-active-foreground: rgb(var(--doing-safe));
    --ne-outline-color: rgb(var(--doing));
    --accent-color: var(--doing);
}


.about__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-gap: var(--space-sm) var(--space-lg);
}


.about__grid {
    display: grid;
    margin: 2em 0 0;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-gap: var(--space-sm) var(--space-lg);
}


.about__subtitle {
    margin-top: 0;
}


.about__item + .about__item {
	margin-top: var(--space-xl);
}


.about__listItem + .about__listItem {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid rgb(var(--misc))
}


.about__listItem {
    display: flex;
}


.about__listEmoji {
    flex: 0 0 auto;
    margin-right: 0.5em;
}


.about__listEmoji:empty {
        display: none;
    }


.about__listText {
    flex: 1 1 auto;
}


body[data-section="speaking"] {
	--ne-links-foreground: rgb(var(--speaking-safe));
	--ne-links-active-foreground: rgb(var(--speaking-safe));
	--ne-outline-color: rgb(var(--speaking));
	--accent-color: var(--speaking);
}


.speaking__cta {
	background: rgba(var(--accent-color), 0.05);
	padding: 2em;
}


.speaking__cta-text {
	font-size: 1.6em;
	margin-bottom: 0.2em;
	font-weight: 600;
	line-height: 1.28;
}


.speaking__cta-link {
	font-size: 1.2em;
}


.speaking__intro {
	color: rgb(var(--speaking-safe));
	font-weight: 600;
}


.speaking__bio {
	color: var(--misc);
}


.speaking__item + .speaking__item {
	margin-top: var(--space-lg);
}


.speaking__meta {
	font-weight: 560;
	color: rgba(var(--baltic), 0.5);
}


.speaking__link,
.speaking__link a {
	font-size: 1.1em;
	line-height: 1.4;
	-webkit-text-decoration-color: rgba(var(--speaking), 0.2);
	        text-decoration-color: rgba(var(--speaking), 0.2);
}


body[data-section="contact"] {
	--ne-links-foreground: rgb(var(--collaborate-safe));
	--ne-links-active-foreground: rgb(var(--collaborate-safe));
	--ne-textfield-focus-border: var(--loch-hsl);
	--ne-outline-color: rgb(var(--collaborate));
	--accent-color: var(--collaborate);
}


.contact-form {
	--ne-contact-foreground: rgb(var(--collaborate-safe));
}


.contact-form__cta {
	background: rgba(var(--collaborate), 0.1);
	padding: 2em;
}


.contact-form__cta .social-icons {
		margin-bottom: 0;
	}


.contact-form__cta-text {
	font-size: 1.6em;
	margin-bottom: 0.2em;
	font-weight: 600;
	line-height: 1.28;
}


.contact-form__cta-link {
	font-size: 1.2em;
}


.contact-form__button {
	background: rgb(var(--collaborate-safe));
}


.contact-form__button:hover {
		background: rgba(var(--collaborate-safe), 0.8);
	}