body {
  font-size: var(--font-size-base);
  background: var(--color-page-background);
  line-height: var(--line-height-global);
  color: var(--color-default-text);
  -webkit-font-smoothing: antialiased;
}

#masthead,
#timeline,
#the-future-is-unknown {
  max-width: var(--timeline-total-width);
  margin: 0 auto;
  position: relative;
  clear: both;
}

#masthead, #masthead-inline {
  height: var(--width-logo);
  margin-top: var(--margin-masthead-top);
  margin-bottom: var(--margin-masthead-bottom);
}

#masthead img, #masthead-inline img {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#masthead .logo, #masthead-inline .logo {
  width: var(--width-logo);
  height: var(--width-logo);
  position: absolute;
  left: var(--position-logo-leading);
  z-index: var(--z-index-mastead-logo);
}

#masthead .logo-noise, #masthead-inline .logo-noise {
  width: var(--width-logo-noise);
  height: var(--width-logo-noise);
  position: absolute;
  top: var(--position-logo-noise-top);
  left: var(--position-logo-noise-leading);
  z-index: var(--z-index-mastead-logo-noise);
}

#masthead h1.company-name, #masthead-inline h1.company-name {
  line-height: var(--width-logo);
  font-size: var(--font-size-company-name);
  margin-left: var(--position-company-name-leading);
  vertical-align: middle;
}
/* Kerning fixes. */
#masthead h1.company-name .r { letter-spacing: var(--kerning-fix-logo-r); }
#masthead h1.company-name .b { letter-spacing: var(--kerning-fix-logo-b); }
#masthead h1.company-name .o { letter-spacing: var(--kerning-fix-logo-o); }

.timeline-graf p,
.timeline-event p {
  font-size: var(--font-size-timeline-detail);
  margin-top: 0;
}

.timeline-graf p,
.timeline-event p,
.timeline-event-minor p.last {
  margin-bottom: var(--margin-timeline-graf-vertical);
}

.timeline-event p {
  color: var(--color-timeline-event);
}

.timeline-graf p.context-note,
.timeline-graf p#navigation,
.timeline-event-minor p,
.person-details p.person-extended-details {
  font-size: var(--font-size-base);
  line-height: var(--line-height-timeline-detail);
  color: var(--color-context-note);
}

.timeline-graf p.context-note.first-item {
  margin-top: var(--margin-timeline-context-note-first-item-top);
}

.timeline-event-minor p span {
  opacity: var(--opacity-timeline-detail-dash);
}

.no-break {
  white-space: nowrap;
}
.tiny-hidden {
  display: none;
}
.timeline-tag h2 .no-break span {
  opacity: var(--opacity-timeline-tag-dash);
}

.pen-underline {
  background: url("https://static.karbon.agency/img/pen-underline.svg");
  background-repeat: no-repeat;
  background-position: bottom;
  padding-bottom: 4px;
}
.pen-strikeout {
  display: inline-flex;
  z-index: var(--z-index-strikeout);
  position: relative;
  padding-right: 8px;
  margin-right: -8px;
}
.pen-strikeout span {
  background: url("https://static.karbon.agency/img/pen-strikeout.svg");
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: -1px;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-strikeout-effect);
  position: absolute;
}

.timeline-event h3 {
  font-size: var(--font-size-timeline-detail-major-title);
}

.no-bold {
  font-family: "Soehne-Leicht";
  font-weight: 100;
}
.timeline-event-minor p span.no-bold {
  opacity: var(--opacity-timeline-detail-amp);
  font-size: 0.8rem;
}
.timeline-event-minor p span.smaller-slash {
  font-size: 1rem;
  line-height: 1rem;
  opacity: 1;
}
.timeline-event h3 span.no-bold {
  opacity: var(--opacity-timeline-detail-amp);
}
.timeline-event h3 span.no-bold span {
  font-size: 1rem;
  line-height: 1rem;
}

.timeline-tag h2 {
  font-size: var(--font-size-timeline-tag);
  line-height: var(--line-height-timeline-tag);
  color: var(--color-timeline-tag);
  margin-top: var(--margin-timeline-tag-top);
}

.timeline-block, #team {
  float: left;
  clear: both;
  position: relative;
}
.timeline-block {
  z-index: var(--z-index-timeline-block);
}
.timeline-block.top-heavy {
  margin-top: var(--line-height-timeline-detail);
}
.timeline-chrono,
.timeline-detail {
  float: left;
  display: block;
  z-index: var(--z-index-timeline-content);
}
.timeline-chrono {
  width: var(--width-timeline-chrono);
  text-align: right;
  padding-left: var(--padding-timeline-ribbon-horizontal);
  padding-right: var(--padding-timeline-ribbon-horizontal);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-index-chrono);
}
.timeline-detail {
  max-width: var(--width-timeline-detail);
  text-align: left;
  margin-left: calc(
    var(--width-timeline-ribbon-band) +
    var(--padding-timeline-ribbon-horizontal)
    );
  margin-right: var(--padding-timeline-ribbon-horizontal);
}

#timeline-ribbon {
  width: var(--width-timeline-ribbon-band);
  margin-top: var(--margin-timeline-ribbon-band-vertical);
  top: 0;
  bottom: 0;
  left: var(--width-timeline-chrono);
  position: absolute;
  background: var(--color-timeline-ribbon-background);
  background: linear-gradient(
    180deg,
    var(--color-timeline-ribbon-gradient-start) 0%,
    var(--color-timeline-ribbon-primary) 2%,
    var(--color-timeline-ribbon-end) 100%
  );
  z-index: var(--z-index-timeline-ribbon);
  --ribbon-border-radius: calc(var(--width-timeline-ribbon-band) * 2);
  border-radius:
    var(--ribbon-border-radius),
    var(--ribbon-border-radius),
    0,
    0
  ;
}

.timeline-ribbon-dot {
  width: var(--width-timeline-ribbon-dot);
  height: var(--width-timeline-ribbon-dot);
  border-radius: calc(var(--width-timeline-ribbon-dot) * 2);
  position: absolute;
  left: calc(
    calc(
      var(--width-timeline-chrono) +
      calc(var(--width-timeline-ribbon-band) / 2)
    ) -
    calc(var(--width-timeline-ribbon-dot) / 2)
  );
  top: var(--margin-timeline-ribbon-dot-top);
  background: var(--color-timeline-dot);
  box-shadow:
    var(--shadow-timeline-dot-x)
    var(--shadow-timeline-dot-y)
    var(--shadow-timeline-dot-blur)
    var(--color-timeline-dot-shadow);
  z-index: var(--z-index-timeline-dot);
}

.timeline-ribbon-dot-future {
  width: var(--width-timeline-ribbon-band);
  height: var(--width-timeline-ribbon-band);
  border-radius: calc(var(--width-timeline-ribbon-band) / 2);
  position: absolute;
  left: calc(
    calc(
      var(--width-timeline-chrono) +
      calc(var(--width-timeline-ribbon-band) / 2)
    ) -
    calc(var(--width-timeline-ribbon-band) / 2)
  );
  z-index: var(--z-index-timline-dot-future);
  background: var(--color-timeline-ribbon-end);
}
.timeline-ribbon-dot-future:nth-child(2) {
  top: calc(
    var(--margin-timeline-future-dot-top) +
    var(--width-timeline-ribbon-band)
  );
  opacity: 0.8;
}
.timeline-ribbon-dot-future:nth-child(3) {
  top: calc(
    calc(
      var(--margin-timeline-future-dot-top) +
      var(--width-timeline-ribbon-band)
    ) * 2
  );
  opacity: 0.4;
}
.timeline-ribbon-dot-future:nth-child(4) {
  top: calc(
    calc(
      var(--margin-timeline-future-dot-top) +
      var(--width-timeline-ribbon-band)
    ) * 3
  );
  opacity: 0.2;
}
.timeline-ribbon-dot-future:nth-child(5) {
  top: calc(
    calc(
      var(--margin-timeline-future-dot-top) +
      var(--width-timeline-ribbon-band)
    ) * 4
  );
  opacity: 0.1;
}

.timeline-tag h2 {
  line-height: 1.1rem;
  margin-top: 10px;
}
.nickname {
  font-size: 80%;
  opacity: 0.6;
}

#the-future-is-unknown {
  height: calc(
    calc(var(--margin-timeline-future-dot-top) * 4) +
    calc(var(--width-timeline-ribbon-band) * 5)
  );
  margin-top: var(--margin-timeline-future-dot-top);
  margin-bottom: var(--margin-masthead-bottom);
}

#team {
  max-width: var(--width-team-box);
  float: left;
  clear: both;
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--color-team-box-background-start),
    var(--color-team-box-background-end)
  );
  border-radius: var(--radius-team-box);
  margin-bottom: var(--line-height-timeline-detail);
  padding: 0;
  z-index: var(--z-index-team);
}

#team * {
  z-index: var(--z-index-team-contents);
}

#staff-wrapper {
  max-width: var(--width-team-box-inner);
  margin: var(--width-team-box-border);
  background-color: var(--color-team-box-background);
  border-radius: var(--radius-team-box-inner);
}

#agency-leadership, #engineering-staff {
  float: left;
  clear: both;
  max-width: var(--width-team-box-inner);
  padding-top: 0;
  padding-right: var(--padding-team-box-row-edge);
  padding-left: var(--padding-team-box-row-edge);
  padding-bottom: 0;
  margin: 0;
}

#engineering-staff {
  margin-bottom: var(--padding-team-box-row-edge);
}

.person-row {
  max-width: var(--width-team-box-people-row);
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  gap: var(--margin-team-box-person-leading);
  row-gap: var(--margin-team-box-person-vertical);
  align-items: flex-start;
  align-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  clear: both;
  margin: 0;
  padding: 0;
}

.founder-row {
  max-width: var(--width-team-box-founder-person-details);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  align-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.person-third {
  max-width: var(--width-team-box-person);
  flex-grow: 1;
}

.founder {
  max-width: var(--width-team-box-person-founder);
}

.headshot {
  float: left;
  width: var(--width-team-box-avatar);
}

.headshot img {
  width: var(--width-team-box-avatar);
  height: var(--width-team-box-avatar);
  border-radius: calc(var(--width-team-box-avatar) * 2);
  border: 1px solid var(--color-page-background);
}

.person-details {
  float: left;
  margin-left: var(--margin-team-box-avatar-trailing);
  height: var(--width-team-box-avatar);
  line-height: 0.889rem;
  font-size: 1rem;
}

.person-details div, .founder .person-details div, .follow div {
  display: flex;
  align-items: center;
  height: var(--width-team-box-avatar);
  line-height: 1.12rem;
}

.person-details b {
  font-size: 1rem;
}

.person-details em, .details-extended, .follow, .follow-small {
  font-size: 0.889rem;
  color: var(--color-timeline-event);
}

.details-extended {
  padding-left: calc(
    var(--width-team-box-avatar) +
    var(--margin-team-box-avatar-trailing)
  );
  width: 100%;
  line-height: 1.388rem;
  opacity: 0.7;
  padding-bottom: var(--padding-team-box-row-edge);
}

#team h4 {
  text-align: center;
  margin-left: 0;
  padding: 0 6px;
  color: var(--color-timeline-dot);
}

#agency-leadership h4 {
  margin-top: var(--margin-team-box-headings-top);
}

#engineering-staff h4 {
  margin-bottom: var(--margin-team-box-headings-top);
  margin-top: var(--padding-team-box-row-edge);
}

#team h4 .wiggles:before {
  content: "----------";
  overflow: hidden;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--color-link-underline-active);
  text-underline-offset: 0px;
  color: transparent;
  vertical-align: super;
  padding: 0 6px;
}

#team .founder-row:hover .headshot img,
#team .person-third:hover .headshot img {
  -webkit-transition: .25s;
     -moz-transition: .25s;
      -ms-transition: .25s;
       -o-transition: .25s;
          transition: .25s;
  box-shadow: 0 15px 25px 0 var(--color-team-box-avatar-shadow);
  transform: scale(1.1);
}

.follow {
  flex-grow: 1;
  padding-bottom: 0;
}

.follow-small {
  display: none;
}

.follow div, .follow-small div {
  opacity: 0.7;
  transition: opacity .2s linear;
  text-align: right;
  float: right;
  align-items: center;
}

.follow:hover div, .follow-small:hover div {
  opacity: 1;
}

.follow .small, .follow-small .small {
  font-size: 80%;
}

.fa-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -0.125rem;
}

.fa-icon.in-footer {
  vertical-align: -0.0425rem;
}

.social-link:hover a i {
  animation: animationFrames linear 2s;
  animation-iteration-count: 1;
  -webkit-animation: animationFrames linear 2s;
  -webkit-animation-iteration-count: 1;
  -moz-animation: animationFrames linear 2s;
  -moz-animation-iteration-count: 1;
  -o-animation: animationFrames linear 2s;
  -o-animation-iteration-count: 1;
  -ms-animation: animationFrames linear 2s;
  -ms-animation-iteration-count: 1;
}

.slug {
  color: var(--color-timeline-event);
}

.vibrant {
  color: var(--color-default-text);
}

.copyright {
  opacity: 0.54;
}

.store-info {
  float: left;
  clear: both;
  display: flex;
  column-gap: 1.2rem;
  row-gap: 0;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  margin-bottom: 20px;
  margin-top: -16px;
  padding: 0;
}

.timeline-event blockquote p {
  opacity: 0.5;
  font-size: var(--font-size-base);
  line-height: 1.678rem;
  float: left;
  margin: 0;
}

.icon {
  float: left;
}

.icon img {
  width: 120px;
  height: 120px;
  max-width: 120px;
  max-height: 120px;
  margin: 0;
  margin-top: 4px;
  padding: 0;
}

a {
  color: var(--color-default-text);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--color-link-underline-active);
  text-underline-offset: 2px;
  transition: .1s;
}

a:hover, a:active {
  color: var(--color-timeline-dot);
  text-decoration-color: var(--color-timeline-ribbon-primary);
}

.social-link a {
  text-decoration: none;
}

.social-link a span {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--color-link-underline-active);
  text-underline-offset: 2px;
}
.social-link a:hover span, .social-link a:active span {
  color: var(--color-timeline-dot);
  text-decoration-color: var(--color-timeline-ribbon-primary);
}

#masthead a, #masthead-inline a,
#masthead a:visited, #masthead-inline a:visited,
#masthead a:hover, #masthead-inline a:hover,
#masthead a:active, #masthead-inline a:active {
  text-decoration: none;
  color: var(--color-default-text);
}

/* Animation */
@keyframes animationFrames{
  0%   { transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
  3%   { transform: rotate(21deg); }
  7%   { transform: rotate(-21deg); }
  10%  { transform: rotate(7deg); }
  13%  { transform: rotate(-5deg); }
  16%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
}

@-moz-keyframes animationFrames{
  0%   { -moz-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
  3%   {  -moz-transform: rotate(21deg); }
  7%   { -moz-transform: rotate(-21deg); }
  10%  { -moz-transform: rotate(7deg); }
  13%  { -moz-transform: rotate(-5deg); }
  16%  { -moz-transform: rotate(0deg); }
  100% {  -moz-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
}

@-webkit-keyframes animationFrames {
  0%   { -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
  3%   { -webkit-transform: rotate(21deg); }
  7%   { -webkit-transform: rotate(-21deg); }
  10%  { -webkit-transform: rotate(7deg); }
  13%  { -webkit-transform: rotate(-5deg); }
  16%  { -webkit-transform: rotate(0deg); }
  100% {  -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
}

@-o-keyframes animationFrames {
  0%   { -o-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
  3%   { -o-transform: rotate(21deg); }
  7%   { -o-transform: rotate(-21deg); }
  10%  {  -o-transform: rotate(7deg); }
  13%  { -o-transform: rotate(-5deg); }
  16%  { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
}

@-ms-keyframes animationFrames {
  0%   { -ms-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
  3%   { -ms-transform: rotate(21deg); }
  7%   { -ms-transform: rotate(-21deg); }
  10%  { -ms-transform: rotate(7deg); }
  13%  { -ms-transform: rotate(-5deg); }
  16%  { -ms-transform: rotate(0deg); }
  100% {  -ms-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); }
}